fix(guide):[guide] fix guide documents (#1047)
This commit is contained in:
wuyiping0628
GitHub
parent
019911a08c
commit
9b9e7130b1
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="demo-guide-callback">
|
||||
<p>当前事件回调：{{ label }}</p>
|
||||
<p>当前事件回调：{{ label }}{{ label ? '。' : '' }}</p>
|
||||
<tiny-button plain class="e1" @click="stepStart">展示前的回调</tiny-button>
|
||||
<tiny-button plain class="e2">展示的回调</tiny-button>
|
||||
<tiny-button plain class="e3">隐藏前的回调</tiny-button>
|
||||
<br>
|
||||
<br />
|
||||
<tiny-button plain class="e4">隐藏的回调</tiny-button>
|
||||
<tiny-button plain class="e5">关闭的回调</tiny-button>
|
||||
<tiny-button plain class="e6">完成/销毁的回调</tiny-button>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="demo-guide-callback">
|
||||
<p>当前事件回调：{{ label }}</p>
|
||||
<p>当前事件回调：{{ label }}{{ label ? '。' : '' }}</p>
|
||||
<tiny-button plain class="e1" @click="stepStart">展示前的回调</tiny-button>
|
||||
<tiny-button plain class="e2">展示的回调</tiny-button>
|
||||
<tiny-button plain class="e3">隐藏前的回调</tiny-button>
|
||||
<br>
|
||||
<br />
|
||||
<tiny-button plain class="e4">隐藏的回调</tiny-button>
|
||||
<tiny-button plain class="e5">关闭的回调</tiny-button>
|
||||
<tiny-button plain class="e6">完成/销毁的回调</tiny-button>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,14 @@
|
|||
<tiny-button plain class="hight3">新手引导3</tiny-button>
|
||||
</div>
|
||||
<div>
|
||||
<tiny-alert class="hight4" :closable="false" description="type 为默认值 info"></tiny-alert>
|
||||
<tiny-alert class="hight5" type="success" size="large" :closable="false" description="提交结果页用于反馈一系列操作任务的处理结果。">
|
||||
<tiny-alert class="hight4" :closable="false" description="type 为默认值 info。"></tiny-alert>
|
||||
<tiny-alert
|
||||
class="hight5"
|
||||
type="success"
|
||||
size="large"
|
||||
:closable="false"
|
||||
description="提交结果页用于反馈一系列操作任务的处理结果。"
|
||||
>
|
||||
<tiny-button size="mini" type="primary">继续提交</tiny-button>
|
||||
<tiny-button size="mini">取消操作</tiny-button>
|
||||
</tiny-alert>
|
||||
|
|
@ -23,12 +29,7 @@
|
|||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
Guide as TinyGuide,
|
||||
Alert as TinyAlert,
|
||||
Button as TinyButton,
|
||||
Divider as TinyDivider
|
||||
} from '@opentiny/vue'
|
||||
import { Guide as TinyGuide, Alert as TinyAlert, Button as TinyButton, Divider as TinyDivider } from '@opentiny/vue'
|
||||
|
||||
const showStep = ref(false)
|
||||
const domData = ref([
|
||||
|
|
|
|||
|
|
@ -10,8 +10,14 @@
|
|||
<tiny-button plain class="hight3">新手引导3</tiny-button>
|
||||
</div>
|
||||
<div>
|
||||
<tiny-alert class="hight4" :closable="false" description="type 为默认值 info"></tiny-alert>
|
||||
<tiny-alert class="hight5" type="success" size="large" :closable="false" description="提交结果页用于反馈一系列操作任务的处理结果。">
|
||||
<tiny-alert class="hight4" :closable="false" description="type 为默认值 info。"></tiny-alert>
|
||||
<tiny-alert
|
||||
class="hight5"
|
||||
type="success"
|
||||
size="large"
|
||||
:closable="false"
|
||||
description="提交结果页用于反馈一系列操作任务的处理结果。"
|
||||
>
|
||||
<tiny-button size="mini" type="primary">继续提交</tiny-button>
|
||||
<tiny-button size="mini">取消操作</tiny-button>
|
||||
</tiny-alert>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-alert class="demo-guide-offset" :closable="false" description="type 为默认值 info"></tiny-alert>
|
||||
<tiny-alert class="demo-guide-offset" :closable="false" description="type 为默认值 info。"></tiny-alert>
|
||||
<tiny-button plain @click="stepStartDefault">默认</tiny-button>
|
||||
<tiny-button plain @click="stepStartMainAxis">纵轴偏移 50px</tiny-button>
|
||||
<tiny-button plain @click="stepStartCrossAxis">横轴偏移 50px</tiny-button>
|
||||
|
|
@ -8,7 +8,12 @@
|
|||
<tiny-guide :show-step="showStepDefault" :dom-data="domDataDefault"></tiny-guide>
|
||||
<tiny-guide :show-step="showStepMainAxis" :dom-data="domDataMainAxis" :main-axis="50"></tiny-guide>
|
||||
<tiny-guide :show-step="showStepCrossAxis" :dom-data="domDataCrossAxis" :cross-axis="50"></tiny-guide>
|
||||
<tiny-guide :show-step="showStepAlignmentAxis" :dom-data="domDataAlignmentAxis" :alignment-axis="50" pop-position="bottom-start"></tiny-guide>
|
||||
<tiny-guide
|
||||
:show-step="showStepAlignmentAxis"
|
||||
:dom-data="domDataAlignmentAxis"
|
||||
:alignment-axis="50"
|
||||
pop-position="bottom-start"
|
||||
></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-alert class="demo-guide-offset" :closable="false" description="type 为默认值 info"></tiny-alert>
|
||||
<tiny-alert class="demo-guide-offset" :closable="false" description="type 为默认值 info。"></tiny-alert>
|
||||
<tiny-button plain @click="stepStartDefault">默认</tiny-button>
|
||||
<tiny-button plain @click="stepStartMainAxis">纵轴偏移 50px</tiny-button>
|
||||
<tiny-button plain @click="stepStartCrossAxis">横轴偏移 50px</tiny-button>
|
||||
|
|
@ -8,7 +8,12 @@
|
|||
<tiny-guide :show-step="showStepDefault" :dom-data="domDataDefault"></tiny-guide>
|
||||
<tiny-guide :show-step="showStepMainAxis" :dom-data="domDataMainAxis" :main-axis="50"></tiny-guide>
|
||||
<tiny-guide :show-step="showStepCrossAxis" :dom-data="domDataCrossAxis" :cross-axis="50"></tiny-guide>
|
||||
<tiny-guide :show-step="showStepAlignmentAxis" :dom-data="domDataAlignmentAxis" :alignment-axis="50" pop-position="bottom-start"></tiny-guide>
|
||||
<tiny-guide
|
||||
:show-step="showStepAlignmentAxis"
|
||||
:dom-data="domDataAlignmentAxis"
|
||||
:alignment-axis="50"
|
||||
pop-position="bottom-start"
|
||||
></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button plain class="h1" @click="stepStart">新手引导自定义宽高</tiny-button>
|
||||
<tiny-guide
|
||||
:show-step="showStep"
|
||||
:dom-data="domData"
|
||||
width="300"
|
||||
height="200"
|
||||
></tiny-guide>
|
||||
<tiny-button plain class="auto-size" @click="stepStart">新手引导自定义宽高</tiny-button>
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData" width="300" height="200"></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -19,7 +14,7 @@ const domData = ref([
|
|||
{
|
||||
title: '新手引导标题1',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
|
||||
domElement: '.h1',
|
||||
domElement: '.auto-size',
|
||||
button: [
|
||||
{
|
||||
text: '完成',
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button plain class="h1" @click="stepStart">新手引导自定义宽高</tiny-button>
|
||||
<tiny-guide
|
||||
:show-step="showStep"
|
||||
:dom-data="domData"
|
||||
width="300"
|
||||
height="200"
|
||||
></tiny-guide>
|
||||
<tiny-button plain class="auto-size" @click="stepStart">新手引导自定义宽高</tiny-button>
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData" width="300" height="200"></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -25,7 +20,7 @@ export default {
|
|||
{
|
||||
title: '新手引导标题1',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
|
||||
domElement: '.h1',
|
||||
domElement: '.auto-size',
|
||||
button: [
|
||||
{
|
||||
text: '完成',
|
||||
|
|
|
|||
|
|
@ -70,10 +70,10 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'modal-overlay-opening',
|
||||
'name': { 'zh-CN': '设置模态叠加层开口', 'en-US': '' },
|
||||
'name': { 'zh-CN': '模态叠加层开口', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN': `
|
||||
<p><code>modal-overlay-opening-padding</code>：可以在模态叠加层开口周围添加的填充量，控制引导元素高亮范围；</p>
|
||||
<p><code>modal-overlay-opening-padding</code>：可以在模态叠加层开口周围添加的填充量，控制引导元素高亮范围。</p>
|
||||
<p><code>modal-overlay-opening-radius</code>：可以在模态叠加层开口周围添加的边界半径量，控制引导元素高亮圆角。</p>
|
||||
`,
|
||||
'en-US': ''
|
||||
|
|
|
|||
Loading…
Reference in New Issue