forked from opentiny/tiny-vue
docs(guide): [guide] optimize guide docs (#799)
* docs(guide): optimize guide api docs * docs(guide): optimize guide demo docs
This commit is contained in:
GitHub
parent
0cdd15d838
commit
f6d2ec50c2
|
|
@ -1,25 +1,23 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="guide-content">
|
||||
<tiny-alert
|
||||
class="pos"
|
||||
:closable="false"
|
||||
type="success"
|
||||
size="large"
|
||||
description="提交结果页用于反馈一系列操作任务的处理结果。"
|
||||
>
|
||||
</tiny-alert>
|
||||
</div>
|
||||
<div class="guide-title">
|
||||
<tiny-alert
|
||||
class="demo-guide-arrow-position"
|
||||
:closable="false"
|
||||
type="success"
|
||||
size="large"
|
||||
description="提交结果页用于反馈一系列操作任务的处理结果。"
|
||||
>
|
||||
</tiny-alert>
|
||||
<div>
|
||||
<tiny-button plain @click="stepStart1">默认</tiny-button>
|
||||
<tiny-button plain @click="stepStart2">上居中</tiny-button>
|
||||
<tiny-button plain @click="stepStart3">右居中</tiny-button>
|
||||
<tiny-button plain @click="stepStart3">左居中</tiny-button>
|
||||
<tiny-button plain @click="stepStart4">独立位置上居中</tiny-button>
|
||||
</div>
|
||||
<tiny-guide :show-step="showStep1" :dom-data="data1"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep2" :dom-data="data2" pop-position="top"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep3" :dom-data="data3" pop-position="right"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep4" :dom-data="data4"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep3" :dom-data="data3" pop-position="left"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep4" :dom-data="data4" pop-position="left"></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -35,11 +33,11 @@ const data1 = ref([
|
|||
{
|
||||
title: '新手引导标题1',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.pos',
|
||||
domElement: '.demo-guide-arrow-position',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -48,11 +46,11 @@ const data2 = ref([
|
|||
{
|
||||
title: '新手引导标题2',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.pos',
|
||||
domElement: '.demo-guide-arrow-position',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -61,11 +59,11 @@ const data3 = ref([
|
|||
{
|
||||
title: '新手引导标题3',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.pos',
|
||||
domElement: '.demo-guide-arrow-position',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -75,11 +73,11 @@ const data4 = ref([
|
|||
popPosition: 'top',
|
||||
title: '新手引导标题4',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.pos',
|
||||
domElement: '.demo-guide-arrow-position',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -103,13 +101,7 @@ function stepStart4() {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.guide-title {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
width: 600px;
|
||||
}
|
||||
.guide-content {
|
||||
width: 600px;
|
||||
.demo-guide-arrow-position {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
|
|||
|
||||
test('引导框箭头距离', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('guide#arror-position')
|
||||
await page.goto('guide#arrow-position')
|
||||
|
||||
const guide = page.locator('body > .tiny-guide')
|
||||
const arrow = guide.locator('.shepherd-arrow')
|
||||
|
|
@ -1,17 +1,23 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-alert class="pos" :closable="false" type="success" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
|
||||
<tiny-alert
|
||||
class="demo-guide-arrow-position"
|
||||
:closable="false"
|
||||
type="success"
|
||||
size="large"
|
||||
description="提交结果页用于反馈一系列操作任务的处理结果。"
|
||||
>
|
||||
</tiny-alert>
|
||||
<div class="guide-title">
|
||||
<div>
|
||||
<tiny-button plain @click="stepStart1">默认</tiny-button>
|
||||
<tiny-button plain @click="stepStart2">上居中</tiny-button>
|
||||
<tiny-button plain @click="stepStart3">右居中</tiny-button>
|
||||
<tiny-button plain @click="stepStart3">左居中</tiny-button>
|
||||
<tiny-button plain @click="stepStart4">独立位置上居中</tiny-button>
|
||||
</div>
|
||||
<tiny-guide :show-step="showStep1" :dom-data="data1"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep2" :dom-data="data2" pop-position="top"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep3" :dom-data="data3" pop-position="right"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep4" :dom-data="data4"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep3" :dom-data="data3" pop-position="left"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep4" :dom-data="data4" pop-position="left"></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -34,11 +40,11 @@ export default {
|
|||
{
|
||||
title: '新手引导标题1',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.pos',
|
||||
domElement: '.demo-guide-arrow-position',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -47,11 +53,11 @@ export default {
|
|||
{
|
||||
title: '新手引导标题2',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.pos',
|
||||
domElement: '.demo-guide-arrow-position',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -60,11 +66,11 @@ export default {
|
|||
{
|
||||
title: '新手引导标题3',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.pos',
|
||||
domElement: '.demo-guide-arrow-position',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -74,11 +80,11 @@ export default {
|
|||
popPosition: 'top',
|
||||
title: '新手引导标题4',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.pos',
|
||||
domElement: '.demo-guide-arrow-position',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -103,9 +109,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.guide-title {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
.demo-guide-arrow-position {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData" light-class="activeDom"></tiny-guide>
|
||||
<div class="base-content">
|
||||
<tiny-button plain class="guide-box1" @click="stepStart">基础新手引导开始</tiny-button>
|
||||
<tiny-button type="primary" @click="stepStart">开始引导</tiny-button>
|
||||
<tiny-divider color="var(--ti-common-color-line-dividing)"></tiny-divider>
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
|
||||
<div>
|
||||
<tiny-button plain class="guide-box1">基础新手引导</tiny-button>
|
||||
<tiny-button plain class="guide-box2">带滚动条新手引导</tiny-button>
|
||||
<tiny-button plain class="guide-box3">带滚动条无标题新手引导</tiny-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Guide as TinyGuide, Button as TinyButton } from '@opentiny/vue'
|
||||
import { ref } from 'vue'
|
||||
import { Guide as TinyGuide, Button as TinyButton, Divider as TinyDivider } from '@opentiny/vue'
|
||||
|
||||
const showStep = ref(false)
|
||||
const domData = ref([
|
||||
|
|
@ -30,21 +31,6 @@ const domData = ref([
|
|||
title: '新手引导标题2',
|
||||
text: '<div class="scrollBox" style="height:254px">这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案</div>',
|
||||
domElement: '.guide-box2',
|
||||
button: [
|
||||
{
|
||||
text: '上一步',
|
||||
action: 'back',
|
||||
secondary: true
|
||||
},
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '<div class="scrollBox" style="height:254px">这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案</div>',
|
||||
domElement: '.guide-box3',
|
||||
button: [
|
||||
{
|
||||
text: '上一步',
|
||||
|
|
@ -55,22 +41,11 @@ const domData = ref([
|
|||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
],
|
||||
classes: 'only-content'
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
onMounted(() => {
|
||||
showStep.value = !showStep.value
|
||||
})
|
||||
|
||||
function stepStart() {
|
||||
showStep.value = !showStep.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.base-content {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
|
|||
|
||||
test('基础用法', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('guide#base')
|
||||
await page.goto('guide#basic-usage')
|
||||
|
||||
const activeDom = await page.getByRole('button', { name: '基础新手引导开始' })
|
||||
const step1 = page.getByRole('heading', { name: '新手引导标题1' })
|
||||
|
|
@ -1,21 +1,23 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData" light-class="activeDom"></tiny-guide>
|
||||
<div class="base-content">
|
||||
<tiny-button plain class="guide-box1" @click="stepStart">基础新手引导开始</tiny-button>
|
||||
<tiny-button type="primary" @click="stepStart">开始引导</tiny-button>
|
||||
<tiny-divider color="var(--ti-common-color-line-dividing)"></tiny-divider>
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
|
||||
<div>
|
||||
<tiny-button plain class="guide-box1">基础新手引导</tiny-button>
|
||||
<tiny-button plain class="guide-box2">带滚动条新手引导</tiny-button>
|
||||
<tiny-button plain class="guide-box3">带滚动条无标题新手引导</tiny-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Guide, Button } from '@opentiny/vue'
|
||||
import { Guide, Button, Divider } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGuide: Guide,
|
||||
TinyButton: Button
|
||||
TinyButton: Button,
|
||||
TinyDivider: Divider
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -47,22 +49,6 @@ export default {
|
|||
action: 'next'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '<div class="scrollBox" style="height:254px">这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案</div>',
|
||||
domElement: '.guide-box3',
|
||||
button: [
|
||||
{
|
||||
text: '上一步',
|
||||
action: 'back',
|
||||
secondary: true
|
||||
},
|
||||
{
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
],
|
||||
classes: 'only-content'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -71,15 +57,6 @@ export default {
|
|||
stepStart() {
|
||||
this.showStep = !this.showStep
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.showStep = !this.showStep
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.base-content {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="callback-content">我是{{ label }}</div>
|
||||
<tiny-button plain class="e1" @click="stepStart">展示之前回调</tiny-button>
|
||||
<tiny-button plain class="e2">展示回调</tiny-button>
|
||||
<tiny-button plain class="e3">隐藏之前回调</tiny-button>
|
||||
<tiny-button plain class="e4">隐藏回调</tiny-button>
|
||||
<tiny-button plain class="e5">关闭取消回调</tiny-button>
|
||||
<tiny-button plain class="e6">销毁/完成回调</tiny-button>
|
||||
<div class="demo-guide-callback">
|
||||
<p>当前事件回调：{{ 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>
|
||||
<tiny-button plain class="e4">隐藏的回调</tiny-button>
|
||||
<tiny-button plain class="e5">关闭的回调</tiny-button>
|
||||
<tiny-button plain class="e6">完成/销毁的回调</tiny-button>
|
||||
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
|
||||
</div>
|
||||
|
|
@ -142,8 +143,10 @@ function stepStart() {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.callback-content {
|
||||
margin-bottom: 20px;
|
||||
<style scoped lang="less">
|
||||
.demo-guide-callback {
|
||||
& > * {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="callback-content">我是{{ label }}</div>
|
||||
<tiny-button plain class="e1" @click="stepStart">展示之前回调</tiny-button>
|
||||
<tiny-button plain class="e2">展示回调</tiny-button>
|
||||
<tiny-button plain class="e3">隐藏之前回调</tiny-button>
|
||||
<tiny-button plain class="e4">隐藏回调</tiny-button>
|
||||
<tiny-button plain class="e5">关闭取消回调</tiny-button>
|
||||
<tiny-button plain class="e6">销毁/完成回调</tiny-button>
|
||||
<div class="demo-guide-callback">
|
||||
<p>当前事件回调：{{ 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>
|
||||
<tiny-button plain class="e4">隐藏的回调</tiny-button>
|
||||
<tiny-button plain class="e5">关闭的回调</tiny-button>
|
||||
<tiny-button plain class="e6">完成/销毁的回调</tiny-button>
|
||||
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
|
||||
</div>
|
||||
|
|
@ -152,8 +153,10 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.callback-content {
|
||||
margin-bottom: 20px;
|
||||
<style scoped lang="less">
|
||||
.demo-guide-callback {
|
||||
& > * {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button plain class="box" @click="stepStart">新手引导</tiny-button>
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Guide as TinyGuide, Button as TinyButton } from '@opentiny/vue'
|
||||
|
||||
const showStep = ref(false)
|
||||
const domData = ref([
|
||||
{
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
|
||||
domElement: '.box',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
],
|
||||
classes: 'only-content'
|
||||
}
|
||||
])
|
||||
|
||||
function stepStart() {
|
||||
showStep.value = !showStep.value
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('纯段落用户引导', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('guide#content-step')
|
||||
|
||||
const showBtn = page.getByRole('button', { name: '新手引导' })
|
||||
const nextBtn = page.getByRole('button', { name: '下一步' })
|
||||
const guide = page.getByRole('dialog')
|
||||
|
||||
await showBtn.click()
|
||||
await expect(guide).toBeVisible()
|
||||
await expect(guide).toHaveClass(/only-content/)
|
||||
await expect(guide.locator('.shepherd-text')).toBeVisible()
|
||||
})
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button plain class="box" @click="stepStart">新手引导</tiny-button>
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Guide, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGuide: Guide,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showStep: false,
|
||||
domData: [
|
||||
{
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
|
||||
domElement: '.box',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
],
|
||||
classes: 'only-content'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
stepStart() {
|
||||
this.showStep = !this.showStep
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="guide-title">
|
||||
<tiny-button plain @click="stepStart1">新手引导1</tiny-button>
|
||||
<tiny-button plain @click="stepStart2">新手引导2</tiny-button>
|
||||
<tiny-button plain @click="stepStart3">新手引导3</tiny-button>
|
||||
</div>
|
||||
<div class="guide-content">
|
||||
<tiny-input class="a1" v-model="input" placeholder="请输入内容"></tiny-input>
|
||||
<tiny-input class="a2" v-model="input" placeholder="请输入内容"></tiny-input>
|
||||
<tiny-input class="a3" v-model="input" placeholder="请输入内容"></tiny-input>
|
||||
</div>
|
||||
<tiny-guide :show-step="showStep1" :dom-data="adata1" :alignment-axis="10" :pop-position="popPosition"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep2" :dom-data="adata2" :alignment-axis="20" :pop-position="popPosition"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep3" :dom-data="adata3" :alignment-axis="50" :pop-position="popPosition"></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Guide as TinyGuide, Button as TinyButton, Input as TinyInput } from '@opentiny/vue'
|
||||
|
||||
const showStep1 = ref(false)
|
||||
const showStep2 = ref(false)
|
||||
const showStep3 = ref(false)
|
||||
const input = ref('')
|
||||
const popPosition = ref('top-end')
|
||||
const adata1 = ref([
|
||||
{
|
||||
title: '新手引导标题1',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.a1',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
const adata2 = ref([
|
||||
{
|
||||
title: '新手引导标题2',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.a2',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
const adata3 = ref([
|
||||
{
|
||||
title: '新手引导标题3',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.a3',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
function stepStart1() {
|
||||
showStep1.value = !showStep1.value
|
||||
}
|
||||
|
||||
function stepStart2() {
|
||||
showStep2.value = !showStep2.value
|
||||
}
|
||||
|
||||
function stepStart3() {
|
||||
showStep3.value = !showStep3.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.guide-title {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.guide-content {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('引导框对齐轴距离', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('guide#guide-poistion-alignmentAxis')
|
||||
|
||||
const guideBtn1 = page.getByRole('button', { name: '新手引导1' })
|
||||
const guideBtn2 = page.getByRole('button', { name: '新手引导2' })
|
||||
const guide = page.getByRole('dialog')
|
||||
const arrow = guide.locator('.shepherd-arrow')
|
||||
|
||||
// 引导1 偏移量10
|
||||
await guideBtn1.click()
|
||||
await expect(guide).toBeVisible()
|
||||
await expect(arrow).toHaveCSS('left', '383.5px')
|
||||
|
||||
// 引导2 偏移量20
|
||||
await page.getByRole('button', { name: 'Close Tour' }).click()
|
||||
await guideBtn2.click()
|
||||
await expect(guide).toBeVisible()
|
||||
await expect(arrow).toHaveCSS('left', '393.5px')
|
||||
})
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="guide-title">
|
||||
<tiny-button plain @click="stepStart1">新手引导1</tiny-button>
|
||||
<tiny-button plain @click="stepStart2">新手引导2</tiny-button>
|
||||
<tiny-button plain @click="stepStart3">新手引导3</tiny-button>
|
||||
</div>
|
||||
<div class="guide-content">
|
||||
<tiny-input class="a1" v-model="input" placeholder="请输入内容"></tiny-input>
|
||||
<tiny-input class="a2" v-model="input" placeholder="请输入内容"></tiny-input>
|
||||
<tiny-input class="a3" v-model="input" placeholder="请输入内容"></tiny-input>
|
||||
</div>
|
||||
<tiny-guide :show-step="showStep1" :dom-data="adata1" :alignment-axis="10" :pop-position="popPosition"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep2" :dom-data="adata2" :alignment-axis="20" :pop-position="popPosition"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep3" :dom-data="adata3" :alignment-axis="50" :pop-position="popPosition"></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Guide, Button, Input } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGuide: Guide,
|
||||
TinyButton: Button,
|
||||
TinyInput: Input
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showStep1: false,
|
||||
showStep2: false,
|
||||
showStep3: false,
|
||||
input: '',
|
||||
popPosition: 'top-end',
|
||||
adata1: [
|
||||
{
|
||||
title: '新手引导标题1',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.a1',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
adata2: [
|
||||
{
|
||||
title: '新手引导标题2',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.a2',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
adata3: [
|
||||
{
|
||||
title: '新手引导标题3',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.a3',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
stepStart1() {
|
||||
this.showStep1 = !this.showStep1
|
||||
},
|
||||
stepStart2() {
|
||||
this.showStep2 = !this.showStep2
|
||||
},
|
||||
stepStart3() {
|
||||
this.showStep3 = !this.showStep3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.guide-title {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.guide-content {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="guide-title">
|
||||
<tiny-button plain @click="stepStart1">新手引导1</tiny-button>
|
||||
<tiny-button plain @click="stepStart2">新手引导2</tiny-button>
|
||||
<tiny-button plain @click="stepStart3">新手引导3</tiny-button>
|
||||
</div>
|
||||
<div class="guide-content">
|
||||
<tiny-input class="c1" v-model="input" placeholder="请输入内容"></tiny-input>
|
||||
<tiny-input class="c2" v-model="input" placeholder="请输入内容"></tiny-input>
|
||||
<tiny-input class="c3" v-model="input" placeholder="请输入内容"></tiny-input>
|
||||
</div>
|
||||
<tiny-guide :show-step="showStep1" :dom-data="cdata1" :cross-axis="10" :pop-position="popPosition"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep2" :dom-data="cdata2" :cross-axis="20" :pop-position="popPosition"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep3" :dom-data="cdata3" :cross-axis="50" :pop-position="popPosition"></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Guide as TinyGuide, Button as TinyButton, Input as TinyInput } from '@opentiny/vue'
|
||||
|
||||
const showStep1 = ref(false)
|
||||
const showStep2 = ref(false)
|
||||
const showStep3 = ref(false)
|
||||
const input = ref('')
|
||||
const popPosition = ref('top-end')
|
||||
const cdata1 = ref([
|
||||
{
|
||||
title: '新手引导标题1',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.c1',
|
||||
classes: 'active',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
const cdata2 = ref([
|
||||
{
|
||||
title: '新手引导标题2',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.c2',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
const cdata3 = ref([
|
||||
{
|
||||
title: '新手引导标题3',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.c3',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
function stepStart1() {
|
||||
showStep1.value = !showStep1.value
|
||||
}
|
||||
|
||||
function stepStart2() {
|
||||
showStep2.value = !showStep2.value
|
||||
}
|
||||
|
||||
function stepStart3() {
|
||||
showStep3.value = !showStep3.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.guide-title {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.guide-content {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('引导框横轴距离', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('guide#guide-poistion-crossAxis')
|
||||
|
||||
const guideBtn1 = page.getByRole('button', { name: '新手引导1' })
|
||||
const guideBtn2 = page.getByRole('button', { name: '新手引导2' })
|
||||
const guide = page.getByRole('dialog')
|
||||
const arrow = guide.locator('.shepherd-arrow')
|
||||
|
||||
// 引导1 距离10
|
||||
await guideBtn1.click()
|
||||
await expect(guide).toBeVisible()
|
||||
await expect(arrow).toHaveCSS('left', '363.5px')
|
||||
|
||||
// 引导2 距离20
|
||||
await page.getByRole('button', { name: 'Close Tour' }).click()
|
||||
await guideBtn2.click()
|
||||
await expect(guide).toBeVisible()
|
||||
await expect(arrow).toHaveCSS('left', '353.5px')
|
||||
})
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="guide-title">
|
||||
<tiny-button plain @click="stepStart1">新手引导1</tiny-button>
|
||||
<tiny-button plain @click="stepStart2">新手引导2</tiny-button>
|
||||
<tiny-button plain @click="stepStart3">新手引导3</tiny-button>
|
||||
</div>
|
||||
<div class="guide-content">
|
||||
<tiny-input class="c1" v-model="input" placeholder="请输入内容"></tiny-input>
|
||||
<tiny-input class="c2" v-model="input" placeholder="请输入内容"></tiny-input>
|
||||
<tiny-input class="c3" v-model="input" placeholder="请输入内容"></tiny-input>
|
||||
</div>
|
||||
<tiny-guide :show-step="showStep1" :dom-data="cdata1" :cross-axis="10" :pop-position="popPosition"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep2" :dom-data="cdata2" :cross-axis="20" :pop-position="popPosition"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep3" :dom-data="cdata3" :cross-axis="50" :pop-position="popPosition"></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Guide, Button, Input } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGuide: Guide,
|
||||
TinyButton: Button,
|
||||
TinyInput: Input
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showStep1: false,
|
||||
showStep2: false,
|
||||
showStep3: false,
|
||||
input: '',
|
||||
popPosition: 'top-end',
|
||||
cdata1: [
|
||||
{
|
||||
title: '新手引导标题1',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.c1',
|
||||
classes: 'active',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
cdata2: [
|
||||
{
|
||||
title: '新手引导标题2',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.c2',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
cdata3: [
|
||||
{
|
||||
title: '新手引导标题3',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.c3',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
stepStart1() {
|
||||
this.showStep1 = !this.showStep1
|
||||
},
|
||||
stepStart2() {
|
||||
this.showStep2 = !this.showStep2
|
||||
},
|
||||
stepStart3() {
|
||||
this.showStep3 = !this.showStep3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.guide-title {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.guide-content {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<template>
|
||||
<div class="guide-content">
|
||||
<tiny-button plain class="m1" @click="stepStart1">新手引导1</tiny-button>
|
||||
<tiny-button plain class="m2" @click="stepStart2">新手引导2</tiny-button>
|
||||
<tiny-button plain class="m3" @click="stepStart3">新手引导3</tiny-button>
|
||||
<tiny-guide :show-step="showStep1" :dom-data="m1"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep2" :dom-data="m2" :main-axis="50"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep3" :dom-data="m3" :main-axis="100"></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Guide as TinyGuide, Button as TinyButton } from '@opentiny/vue'
|
||||
|
||||
const showStep1 = ref(false)
|
||||
const showStep2 = ref(false)
|
||||
const showStep3 = ref(false)
|
||||
const m1 = ref([
|
||||
{
|
||||
title: '新手引导标题1',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.m1',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
const m2 = ref([
|
||||
{
|
||||
title: '新手引导标题2',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.m2',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
const m3 = ref([
|
||||
{
|
||||
title: '新手引导标题3',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.m3',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
function stepStart1() {
|
||||
showStep1.value = !showStep1.value
|
||||
}
|
||||
|
||||
function stepStart2() {
|
||||
showStep2.value = !showStep2.value
|
||||
}
|
||||
|
||||
function stepStart3() {
|
||||
showStep3.value = !showStep3.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.guide-content {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
<template>
|
||||
<div class="guide-content">
|
||||
<tiny-button plain class="m1" @click="stepStart1">新手引导1</tiny-button>
|
||||
<tiny-button plain class="m2" @click="stepStart2">新手引导2</tiny-button>
|
||||
<tiny-button plain class="m3" @click="stepStart3">新手引导3</tiny-button>
|
||||
<tiny-guide :show-step="showStep1" :dom-data="m1"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep2" :dom-data="m2" :main-axis="50"></tiny-guide>
|
||||
<tiny-guide :show-step="showStep3" :dom-data="m3" :main-axis="100"></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Guide, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGuide: Guide,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showStep1: false,
|
||||
showStep2: false,
|
||||
showStep3: false,
|
||||
m1: [
|
||||
{
|
||||
title: '新手引导标题1',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.m1',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
m2: [
|
||||
{
|
||||
title: '新手引导标题2',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.m2',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
m3: [
|
||||
{
|
||||
title: '新手引导标题3',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.m3',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
stepStart1() {
|
||||
this.showStep1 = !this.showStep1
|
||||
},
|
||||
stepStart2() {
|
||||
this.showStep2 = !this.showStep2
|
||||
},
|
||||
stepStart3() {
|
||||
this.showStep3 = !this.showStep3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.guide-content {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,14 +1,17 @@
|
|||
<template>
|
||||
<div class="tiny-hight-content">
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData">
|
||||
<div>
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData" pop-position="top">
|
||||
<template #main>
|
||||
<tiny-button plain @click="stepStart">引导</tiny-button>
|
||||
<tiny-button plain class="hight1">新手引导1</tiny-button>
|
||||
<tiny-button plain class="hight2">新手引导2</tiny-button>
|
||||
<tiny-button plain class="hight3">新手引导3</tiny-button>
|
||||
<tiny-alert class="hight4" :closable="false" description="type 为默认值 info"></tiny-alert>
|
||||
<div class="hight11 tiny-hight-content-item">
|
||||
<tiny-alert type="success" size="large" :closable="false" description="提交结果页用于反馈一系列操作任务的处理结果。">
|
||||
<tiny-button type="primary" @click="stepStart">开始引导</tiny-button>
|
||||
<tiny-divider color="var(--ti-common-color-line-dividing)"></tiny-divider>
|
||||
<div>
|
||||
<tiny-button plain class="hight1">新手引导1</tiny-button>
|
||||
<tiny-button plain class="hight2">新手引导2</tiny-button>
|
||||
<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-button size="mini" type="primary">继续提交</tiny-button>
|
||||
<tiny-button size="mini">取消操作</tiny-button>
|
||||
</tiny-alert>
|
||||
|
|
@ -20,16 +23,20 @@
|
|||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Guide as TinyGuide, Alert as TinyAlert, Button as TinyButton } from '@opentiny/vue'
|
||||
import {
|
||||
Guide as TinyGuide,
|
||||
Alert as TinyAlert,
|
||||
Button as TinyButton,
|
||||
Divider as TinyDivider
|
||||
} from '@opentiny/vue'
|
||||
|
||||
const showStep = ref(false)
|
||||
const value = ref(false)
|
||||
const domData = ref([
|
||||
{
|
||||
title: '新手引导标题',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.hight1',
|
||||
hightBox: ['.hight11', '.hight3', '.hight4'],
|
||||
hightBox: ['.hight3', '.hight4', '.hight5'],
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
|
|
@ -42,6 +49,11 @@ const domData = ref([
|
|||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.hight2',
|
||||
button: [
|
||||
{
|
||||
text: '上一步',
|
||||
action: 'back',
|
||||
secondary: true
|
||||
},
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
|
|
@ -52,33 +64,22 @@ const domData = ref([
|
|||
title: '新手引导标题',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.hight3',
|
||||
hightBox: ['.hight11'],
|
||||
hightBox: ['.hight5'],
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
text: '上一步',
|
||||
action: 'back',
|
||||
secondary: true
|
||||
},
|
||||
{
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
function stepStart() {
|
||||
value.value = !value.value
|
||||
showStep.value = !showStep.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-hight-content {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.tiny-hight-content-item {
|
||||
margin-top: 200px;
|
||||
}
|
||||
|
||||
.hight4 {
|
||||
width: auto;
|
||||
height: 36px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
|
|||
|
||||
test('高亮多处', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('guide#dom-hight')
|
||||
await page.goto('guide#highlight-box')
|
||||
|
||||
const showBtn = page.getByRole('button', { name: '引导', exact: true })
|
||||
const step1 = page.getByRole('button', { name: '新手引导1' })
|
||||
|
|
@ -1,14 +1,17 @@
|
|||
<template>
|
||||
<div class="tiny-hight-content">
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData">
|
||||
<div>
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData" pop-position="top">
|
||||
<template #main>
|
||||
<tiny-button plain @click="stepStart">引导</tiny-button>
|
||||
<tiny-button plain class="hight1">新手引导1</tiny-button>
|
||||
<tiny-button plain class="hight2">新手引导2</tiny-button>
|
||||
<tiny-button plain class="hight3">新手引导3</tiny-button>
|
||||
<tiny-alert class="hight4" :closable="false" description="type 为默认值 info"></tiny-alert>
|
||||
<div class="hight11 tiny-hight-content-item">
|
||||
<tiny-alert type="success" size="large" :closable="false" description="提交结果页用于反馈一系列操作任务的处理结果。">
|
||||
<tiny-button type="primary" @click="stepStart">开始引导</tiny-button>
|
||||
<tiny-divider color="var(--ti-common-color-line-dividing)"></tiny-divider>
|
||||
<div>
|
||||
<tiny-button plain class="hight1">新手引导1</tiny-button>
|
||||
<tiny-button plain class="hight2">新手引导2</tiny-button>
|
||||
<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-button size="mini" type="primary">继续提交</tiny-button>
|
||||
<tiny-button size="mini">取消操作</tiny-button>
|
||||
</tiny-alert>
|
||||
|
|
@ -19,24 +22,24 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { Guide, Alert, Button } from '@opentiny/vue'
|
||||
import { Guide, Alert, Button, Divider } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGuide: Guide,
|
||||
TinyAlert: Alert,
|
||||
TinyButton: Button
|
||||
TinyButton: Button,
|
||||
TinyDivider: Divider
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showStep: false,
|
||||
value: false,
|
||||
domData: [
|
||||
{
|
||||
title: '新手引导标题',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.hight1',
|
||||
hightBox: ['.hight11', '.hight3', '.hight4'],
|
||||
hightBox: ['.hight5', '.hight3', '.hight4'],
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
|
|
@ -49,6 +52,11 @@ export default {
|
|||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.hight2',
|
||||
button: [
|
||||
{
|
||||
text: '上一步',
|
||||
action: 'back',
|
||||
secondary: true
|
||||
},
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
|
|
@ -59,11 +67,16 @@ export default {
|
|||
title: '新手引导标题',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.hight3',
|
||||
hightBox: ['.hight11'],
|
||||
hightBox: ['.hight5'],
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
text: '上一步',
|
||||
action: 'back',
|
||||
secondary: true
|
||||
},
|
||||
{
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -72,24 +85,8 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
stepStart() {
|
||||
this.value = !this.value
|
||||
this.showStep = !this.showStep
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-hight-content {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.tiny-hight-content-item {
|
||||
margin-top: 200px;
|
||||
}
|
||||
|
||||
.hight4 {
|
||||
width: auto;
|
||||
height: 36px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -18,8 +18,8 @@ const domData = ref([
|
|||
domElement: '.btn1',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@ export default {
|
|||
domElement: '.btn1',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
|
|||
|
||||
test('在模态叠加层开口周围添加的填充量', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('guide#set-modal-overlay-opening')
|
||||
await page.goto('guide#modal-overlay-opening')
|
||||
|
||||
const showBtn = page.getByRole('button', { name: '新手引导' })
|
||||
const guide = page.getByRole('dialog')
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<tiny-button plain @click="stepStartAlignmentAxis">对齐轴偏移 50px</tiny-button>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Guide as TinyGuide, Button as TinyButton, Alert as TinyAlert } from '@opentiny/vue'
|
||||
|
||||
const showStepDefault = ref(false)
|
||||
const showStepMainAxis = ref(false)
|
||||
const showStepCrossAxis = ref(false)
|
||||
const showStepAlignmentAxis = ref(false)
|
||||
const domDataDefault = ref([
|
||||
{
|
||||
title: '新手引导标题1',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.demo-guide-offset',
|
||||
button: [
|
||||
{
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
const domDataMainAxis = ref([
|
||||
{
|
||||
title: '新手引导标题2',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.demo-guide-offset',
|
||||
button: [
|
||||
{
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
const domDataCrossAxis = ref([
|
||||
{
|
||||
title: '新手引导标题3',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.demo-guide-offset',
|
||||
button: [
|
||||
{
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
const domDataAlignmentAxis = ref([
|
||||
{
|
||||
title: '新手引导标题4',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.demo-guide-offset',
|
||||
button: [
|
||||
{
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
function stepStartDefault() {
|
||||
showStepDefault.value = !showStepDefault.value
|
||||
}
|
||||
|
||||
function stepStartMainAxis() {
|
||||
showStepMainAxis.value = !showStepMainAxis.value
|
||||
}
|
||||
|
||||
function stepStartCrossAxis() {
|
||||
showStepCrossAxis.value = !showStepCrossAxis.value
|
||||
}
|
||||
|
||||
function stepStartAlignmentAxis() {
|
||||
showStepAlignmentAxis.value = !showStepAlignmentAxis.value
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('引导框主轴（纵轴）距离', async ({ page }) => {
|
||||
test('引导框偏移量', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('guide#guide-poistion-mainAxis')
|
||||
await page.goto('guide#offset')
|
||||
|
||||
const guideBtn1 = page.getByRole('button', { name: '新手引导1' })
|
||||
const guideBtn2 = page.getByRole('button', { name: '新手引导2' })
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<tiny-button plain @click="stepStartAlignmentAxis">对齐轴偏移 50px</tiny-button>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Guide, Button, Alert } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGuide: Guide,
|
||||
TinyButton: Button,
|
||||
TinyAlert: Alert
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showStepDefault: false,
|
||||
showStepMainAxis: false,
|
||||
showStepCrossAxis: false,
|
||||
showStepAlignmentAxis: false,
|
||||
domDataDefault: [
|
||||
{
|
||||
title: '新手引导标题1',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.demo-guide-offset',
|
||||
button: [
|
||||
{
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
domDataMainAxis: [
|
||||
{
|
||||
title: '新手引导标题2',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.demo-guide-offset',
|
||||
button: [
|
||||
{
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
domDataCrossAxis: [
|
||||
{
|
||||
title: '新手引导标题3',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.demo-guide-offset',
|
||||
button: [
|
||||
{
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
domDataAlignmentAxis: [
|
||||
{
|
||||
title: '新手引导标题4',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.demo-guide-offset',
|
||||
button: [
|
||||
{
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
stepStartDefault() {
|
||||
this.showStepDefault = !this.showStepDefault
|
||||
},
|
||||
stepStartMainAxis() {
|
||||
this.showStepMainAxis = !this.showStepMainAxis
|
||||
},
|
||||
stepStartCrossAxis() {
|
||||
this.showStepCrossAxis = !this.showStepCrossAxis
|
||||
},
|
||||
stepStartAlignmentAxis() {
|
||||
this.showStepAlignmentAxis = !this.showStepAlignmentAxis
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,15 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button plain @click="stepStart">新手引导开始</tiny-button>
|
||||
<tiny-button plain class="guide1-content-steps">新手引导1</tiny-button>
|
||||
<tiny-button plain class="guide2-content-steps">新手引导2</tiny-button>
|
||||
<tiny-button type="primary" @click="stepStart">开始引导</tiny-button>
|
||||
<tiny-divider color="var(--ti-common-color-line-dividing)"></tiny-divider>
|
||||
<div>
|
||||
<tiny-button plain class="guide1-content-steps">新手引导1</tiny-button>
|
||||
<tiny-button plain class="guide2-content-steps">新手引导2</tiny-button>
|
||||
</div>
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Guide as TinyGuide, Button as TinyButton } from '@opentiny/vue'
|
||||
import { Guide as TinyGuide, Button as TinyButton, Divider as TinyDivider } from '@opentiny/vue'
|
||||
|
||||
const showStep = ref(false)
|
||||
const domData = ref([
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('多步骤纯段落用户引导', async ({ page }) => {
|
||||
test('纯段落用户引导', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('guide#content-steps')
|
||||
await page.goto('guide#only-content')
|
||||
|
||||
const showBtn = page.getByRole('button', { name: '新手引导开始' })
|
||||
const nextBtn = page.getByRole('button', { name: '下一步' })
|
||||
|
|
@ -1,19 +1,23 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button plain @click="stepStart">新手引导开始</tiny-button>
|
||||
<tiny-button plain class="guide1-content-steps">新手引导1</tiny-button>
|
||||
<tiny-button plain class="guide2-content-steps">新手引导2</tiny-button>
|
||||
<tiny-button type="primary" @click="stepStart">开始引导</tiny-button>
|
||||
<tiny-divider color="var(--ti-common-color-line-dividing)"></tiny-divider>
|
||||
<div>
|
||||
<tiny-button plain class="guide1-content-steps">新手引导1</tiny-button>
|
||||
<tiny-button plain class="guide2-content-steps">新手引导2</tiny-button>
|
||||
</div>
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Guide, Button } from '@opentiny/vue'
|
||||
import { Guide, Button, Divider } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGuide: Guide,
|
||||
TinyButton: Button
|
||||
TinyButton: Button,
|
||||
TinyDivider: Divider
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
:dom-data="domData"
|
||||
width="300"
|
||||
height="200"
|
||||
:modal-overlay-opening-paddin="size"
|
||||
></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -15,7 +14,6 @@
|
|||
import { ref } from 'vue'
|
||||
import { Guide as TinyGuide, Button as TinyButton } from '@opentiny/vue'
|
||||
|
||||
const size = ref(10)
|
||||
const showStep = ref(false)
|
||||
const domData = ref([
|
||||
{
|
||||
|
|
@ -24,8 +22,8 @@ const domData = ref([
|
|||
domElement: '.h1',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
:dom-data="domData"
|
||||
width="300"
|
||||
height="200"
|
||||
:modal-overlay-opening-paddin="size"
|
||||
></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -21,7 +20,6 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
size: 10,
|
||||
showStep: false,
|
||||
domData: [
|
||||
{
|
||||
|
|
@ -30,8 +28,8 @@ export default {
|
|||
domElement: '.h1',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,81 +0,0 @@
|
|||
<template>
|
||||
<div class="guide-content">
|
||||
<tiny-button @click="stepStart">多步骤新手引导开始</tiny-button>
|
||||
<br />
|
||||
<tiny-button plain class="guide1-title-steps">新手引导1</tiny-button>
|
||||
<br />
|
||||
<tiny-button plain class="guide2-title-steps">新手引导2</tiny-button>
|
||||
<br />
|
||||
<tiny-button plain class="guide3-title-steps">新手引导3</tiny-button>
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Guide as TinyGuide, Button as TinyButton } from '@opentiny/vue'
|
||||
|
||||
const showStep = ref(false)
|
||||
const domData = ref([
|
||||
{
|
||||
title: '新手引导标题1',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.guide1-title-steps',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next',
|
||||
classes: 'step'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '新手引导标题2',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.guide2-title-steps',
|
||||
button: [
|
||||
{
|
||||
text: '上一步',
|
||||
action: 'back',
|
||||
secondary: true
|
||||
},
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '新手引导标题3',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.guide3-title-steps',
|
||||
button: [
|
||||
{
|
||||
text: '上一步',
|
||||
action: 'back',
|
||||
secondary: true
|
||||
},
|
||||
{
|
||||
text: '立即体验',
|
||||
action: 'complete',
|
||||
secondary: true
|
||||
},
|
||||
{
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
function stepStart() {
|
||||
showStep.value = !showStep.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.guide-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('通过添加多个类名实现用户引导', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('guide#title-steps')
|
||||
|
||||
const showBtn = page.getByRole('button', { name: '多步骤新手引导开始' })
|
||||
const step1 = page.getByRole('heading', { name: '新手引导标题1' })
|
||||
const step2 = page.getByRole('heading', { name: '新手引导标题2' })
|
||||
const step3 = page.getByRole('dialog').locator('div').nth(2)
|
||||
const next = page.getByRole('button', { name: '下一步' })
|
||||
const complate = page.getByRole('button', { name: '完成' })
|
||||
const closeBtn = page.getByRole('button', { name: 'Close Tour' })
|
||||
|
||||
await showBtn.click()
|
||||
await expect(step1).toBeVisible()
|
||||
await next.click()
|
||||
await expect(step2).toBeVisible()
|
||||
await next.click()
|
||||
await expect(step3).toBeVisible()
|
||||
await complate.click()
|
||||
await expect(step3).toBeHidden()
|
||||
})
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
<template>
|
||||
<div class="guide-content">
|
||||
<tiny-button @click="stepStart">多步骤新手引导开始</tiny-button>
|
||||
<br />
|
||||
<tiny-button plain class="guide1-title-steps">新手引导1</tiny-button>
|
||||
<br />
|
||||
<tiny-button plain class="guide2-title-steps">新手引导2</tiny-button>
|
||||
<br />
|
||||
<tiny-button plain class="guide3-title-steps">新手引导3</tiny-button>
|
||||
<tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Guide, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGuide: Guide,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showStep: false,
|
||||
domData: [
|
||||
{
|
||||
title: '新手引导标题1',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.guide1-title-steps',
|
||||
button: [
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next',
|
||||
classes: 'step'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '新手引导标题2',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.guide2-title-steps',
|
||||
button: [
|
||||
{
|
||||
text: '上一步',
|
||||
action: 'back',
|
||||
secondary: true
|
||||
},
|
||||
{
|
||||
text: '下一步',
|
||||
action: 'next'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '新手引导标题3',
|
||||
text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
|
||||
domElement: '.guide3-title-steps',
|
||||
button: [
|
||||
{
|
||||
text: '上一步',
|
||||
action: 'back',
|
||||
secondary: true
|
||||
},
|
||||
{
|
||||
text: '立即体验',
|
||||
action: 'complete',
|
||||
secondary: true
|
||||
},
|
||||
{
|
||||
text: '完成',
|
||||
action: 'complete'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
stepStart() {
|
||||
this.showStep = !this.showStep
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.guide-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Guide
|
||||
---
|
||||
|
||||
# Guide
|
||||
|
||||
<div>Guide</div>
|
||||
|
|
@ -3,76 +3,58 @@ export default {
|
|||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
'demoId': 'base',
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基础用法', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': '' },
|
||||
'codeFiles': ['base.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'arror-position',
|
||||
'name': { 'zh-CN': '引导框箭头距离', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>pop-position</code> 属性设置箭头方向。<br>该属性的可选值为 <code>top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end</code> <br>若存在多个步骤，需要单独给每个步骤设置不同的展示位置，可以在 <code>dom-data</code> 里面添加 <code>popPosition</code> 属性并赋值，若存在单独设置的箭头方向，则会覆盖全局的箭头方向</p>\n',
|
||||
'zh-CN': '<p>通过 <code>dom-data</code> 设置每一个步骤要显示的内容，<code>show-step</code> 设置为 <code>true</code> 即可开启指引。<code>dom-data</code> 详细配置可参考 <a href="#IDomData">IDomData</a> 类型。</p>',
|
||||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['arror-position.vue']
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'callback',
|
||||
'name': { 'zh-CN': '窗口的事件回调', 'en-US': '' },
|
||||
'demoId': 'arrow-position',
|
||||
'name': { 'zh-CN': '箭头位置', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>窗口的事件回调<br>在 <code>dom-data<code> 中使用：<br> <code>beforeShow</code> ：展示前回调<br> <code>show</code> ：展示回调<br> <code>beforeHide</code> ：隐藏前回调<br> <code>hide</code> ：隐藏回调<br> <code>cancel</code> ：关闭取消回调<br> <code>complete</code> ：完成回调<br> <code>destroy</code> ：销毁回调</p>',
|
||||
'zh-CN': `
|
||||
<p>通过 <code>pop-position</code> 属性设置箭头位置，该属性的可选值可参考 <a href="#IPosition">IPosition</a> 类型。</p>
|
||||
<p>若存在多个步骤，需要单独给每个步骤设置不同的展示位置，可以在 <code>dom-data</code> 里面添加 <code>popPosition</code> 属性并赋值，若存在单独设置的箭头位置，则会覆盖全局的箭头位置。</p>
|
||||
`,
|
||||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['callback.vue']
|
||||
'codeFiles': ['arrow-position.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'content-step',
|
||||
'demoId': 'only-content',
|
||||
'name': { 'zh-CN': '纯段落用户引导', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '<p>通过添加 <code>only-content</code> 类名实现纯段落用户引导</p>\n', 'en-US': '' },
|
||||
'codeFiles': ['content-step.vue']
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过添加 <code>only-content</code> 类名实现纯段落用户引导。</p>',
|
||||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['only-content.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'content-steps',
|
||||
'name': { 'zh-CN': '多步骤纯段落用户引导', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '<p>通过添加 <code>only-content</code> 类名实现纯段落用户引导</p>\n', 'en-US': '' },
|
||||
'codeFiles': ['content-steps.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'dom-hight',
|
||||
'demoId': 'highlight-box',
|
||||
'name': { 'zh-CN': '高亮多处', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>在 <code>dom-data</code> 里面通过 <code>hightBox</code>属性添加需要高亮的元素</p>\n',
|
||||
'zh-CN': '<p>在 <code>dom-data</code> 里面通过 <code>hightBox</code> 属性添加需要高亮的元素。</p>',
|
||||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['dom-hight.vue']
|
||||
'codeFiles': ['highlight-box.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'guide-poistion-mainAxis',
|
||||
'name': { 'zh-CN': '引导框主轴（纵轴）距离', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '<p>通过设置 <code>main-axis</code> 大小来设置主轴（纵轴）距离</p>\n', 'en-US': '' },
|
||||
'codeFiles': ['guide-poistion-mainAxis.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'guide-poistion-crossAxis',
|
||||
'name': { 'zh-CN': '引导框横轴距离', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '<p>通过设置 <code>cross-axis</code> 大小来设置横轴距离</p>\n', 'en-US': '' },
|
||||
'codeFiles': ['guide-poistion-crossAxis.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'guide-poistion-alignmentAxis',
|
||||
'name': { 'zh-CN': '引导框对齐轴距离', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '<p>通过设置 <code>alignment-axis</code> 大小来设置对齐轴距离</p>\n', 'en-US': '' },
|
||||
'codeFiles': ['guide-poistion-alignmentAxis.vue']
|
||||
'demoId': 'offset',
|
||||
'name': { 'zh-CN': '引导框偏移量', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>main-axis</code> / <code>cross-axis</code> / <code>alignment-axis</code> 设置纵轴、横轴和对齐轴的偏移量。</p>',
|
||||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['offset.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'image-text',
|
||||
'name': { 'zh-CN': '图文结合用户引导', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可以在插槽里面添加任何 <code>html</code> 或通过 <code>dom-data</code> 里面的 <code>text</code> 属性实现图文结合用户引导</p>\n',
|
||||
'zh-CN': '<p>可以在插槽里面添加任何 <code>html</code> 或通过 <code>dom-data</code> 里面的 <code>text</code> 属性实现图文结合用户引导。</p>',
|
||||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['image-text.vue']
|
||||
|
|
@ -80,111 +62,150 @@ export default {
|
|||
{
|
||||
'demoId': 'size',
|
||||
'name': { 'zh-CN': '自定义宽高', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '<p>通过添加 <code>width</code>和 <code>height</code>来自定义宽高</p>\n', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过添加 <code>width</code> 和 <code>height</code> 来自定义宽高。</p>',
|
||||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['size.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'title-steps',
|
||||
'name': { 'zh-CN': '通过添加多个类名实现用户引导', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '<p>详细用法参考如下示例</p>\n', 'en-US': '' },
|
||||
'codeFiles': ['title-steps.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'set-modal-overlay-opening',
|
||||
'demoId': 'modal-overlay-opening',
|
||||
'name': { 'zh-CN': '设置模态叠加层开口', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p><code>modal-overlay-opening-padding</code> ：可以在模态叠加层开口周围添加的边界半径量，控制引导元素高亮范围<br><p><code>modal-overlay-opening-radius</code> ：可以在模态叠加层开口周围添加的填充量，控制引导元素高亮圆角</p>\n',
|
||||
'zh-CN': `
|
||||
<p><code>modal-overlay-opening-padding</code>：可以在模态叠加层开口周围添加的填充量，控制引导元素高亮范围；</p>
|
||||
<p><code>modal-overlay-opening-radius</code>：可以在模态叠加层开口周围添加的边界半径量，控制引导元素高亮圆角。</p>
|
||||
`,
|
||||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['set-modal-overlay-opening.vue']
|
||||
'codeFiles': ['modal-overlay-opening.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'callback',
|
||||
'name': { 'zh-CN': '事件回调', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>事件回调在 <code>dom-data</code> 中使用，详情可参考 <a href="#IDomData">IDomData</a> 类型。</p>',
|
||||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['callback.vue']
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
{
|
||||
'name': 'guide',
|
||||
'type': 'component',
|
||||
'properties': [
|
||||
'props': [
|
||||
{
|
||||
'name': 'arrow',
|
||||
'type': 'boolean ',
|
||||
'defaultValue': 'true',
|
||||
'desc': { 'zh-CN': '是否显示工具提示的箭头', 'en-US': '' },
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'pop-position',
|
||||
'type': 'string ',
|
||||
'defaultValue': 'bottom',
|
||||
'name': 'alignment-axis',
|
||||
'type': 'number',
|
||||
'defaultValue': '0',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'引导框箭头距离，该属性的可选值为 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end',
|
||||
'zh-CN': '设置引导框对齐轴距离',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'arror-position'
|
||||
'demoId': 'offset'
|
||||
},
|
||||
{
|
||||
'name': 'dom-data',
|
||||
'type': 'Array ',
|
||||
'defaultValue': '[]',
|
||||
'desc': { 'zh-CN': '用户引导参数', 'en-US': '' },
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'main-axis',
|
||||
'type': 'number ',
|
||||
'defaultValue': '18',
|
||||
'desc': { 'zh-CN': '设置引导框主轴（纵轴）距离', 'en-US': '' },
|
||||
'demoId': 'guide-poistion-mainAxis'
|
||||
'name': 'arrow',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'true',
|
||||
'desc': {
|
||||
'zh-CN': '是否显示工具提示的箭头',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'cross-axis',
|
||||
'type': 'number ',
|
||||
'type': 'number',
|
||||
'defaultValue': '0',
|
||||
'desc': { 'zh-CN': '设置引导框横轴距离', 'en-US': '' },
|
||||
'demoId': 'guide-poistion-crossAxis'
|
||||
'desc': {
|
||||
'zh-CN': '设置引导框横轴距离',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'offset'
|
||||
},
|
||||
{
|
||||
'name': 'alignment-axis',
|
||||
'type': 'number ',
|
||||
'defaultValue': '0',
|
||||
'desc': { 'zh-CN': '设置引导框对齐轴距离', 'en-US': '' },
|
||||
'demoId': 'guide-poistion-alignmentAxis'
|
||||
},
|
||||
{
|
||||
'name': 'width',
|
||||
'type': 'number ',
|
||||
'defaultValue': '510',
|
||||
'desc': { 'zh-CN': '设置引导框宽度', 'en-US': '' },
|
||||
'demoId': 'size'
|
||||
'name': 'dom-data',
|
||||
'type': 'IDomData[]',
|
||||
'typeAnchorName': 'IDomData',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '用户引导参数',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'height',
|
||||
'type': 'number ',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置引导框高度', 'en-US': '' },
|
||||
'type': 'number',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '设置引导框高度',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'size'
|
||||
},
|
||||
{
|
||||
'name': 'light-class',
|
||||
'type': 'string',
|
||||
'defaultValue': '--',
|
||||
'desc': {
|
||||
'zh-CN': '当元素突出显示时（即，当其步骤处于活动状态时）应用于元素的类名',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'main-axis',
|
||||
'type': 'number',
|
||||
'defaultValue': '18',
|
||||
'desc': {
|
||||
'zh-CN': '设置引导框主轴（纵轴）距离',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'offset'
|
||||
},
|
||||
{
|
||||
'name': 'modal-overlay-opening-padding',
|
||||
'type': 'number ',
|
||||
'type': 'number',
|
||||
'defaultValue': '0',
|
||||
'desc': { 'zh-CN': '在模态叠加层开口周围添加的填充量', 'en-US': '' },
|
||||
'demoId': 'set-modal-overlay-opening'
|
||||
'desc': {
|
||||
'zh-CN': '在模态叠加层开口周围添加的填充量',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'modal-overlay-opening'
|
||||
},
|
||||
{
|
||||
'name': 'modal-overlay-opening-radius',
|
||||
'type': 'number ',
|
||||
'type': 'number',
|
||||
'defaultValue': '0',
|
||||
'desc': { 'zh-CN': '在模态叠加层开口周围添加的边界半径量', 'en-US': '' },
|
||||
'demoId': 'set-modal-overlay-opening'
|
||||
'desc': {
|
||||
'zh-CN': '在模态叠加层开口周围添加的边界半径量',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'modal-overlay-opening'
|
||||
},
|
||||
{
|
||||
'name': 'light-class',
|
||||
'type': 'string ',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '当元素突出显示时（即，当其步骤处于活动状态时）应用于元素的额外类', 'en-US': '' },
|
||||
'demoId': 'activeDom'
|
||||
'name': 'pop-position',
|
||||
'type': 'IPosition',
|
||||
'typeAnchorName': 'IPosition',
|
||||
'defaultValue': '\'bottom\'',
|
||||
'desc': {
|
||||
'zh-CN': '引导框箭头位置，该属性的可选值可参考 IPosition 类型',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'arrow-position'
|
||||
},
|
||||
{
|
||||
'name': 'width',
|
||||
'type': 'number',
|
||||
'defaultValue': '510',
|
||||
'desc': {
|
||||
'zh-CN': '设置引导框宽度',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'size'
|
||||
}
|
||||
],
|
||||
'events': [],
|
||||
|
|
@ -193,127 +214,67 @@ export default {
|
|||
'name': 'main',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置引导框内容', 'en-US': '' },
|
||||
'demoId': 'dom-hight'
|
||||
}
|
||||
],
|
||||
'domData-attrs': [
|
||||
{
|
||||
'name': 'title',
|
||||
'type': 'string ',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '表示需要设置的头部标题名', 'en-US': '' },
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'text',
|
||||
'type': 'string ',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '表示需要填入的内容区（可以是一个 html）', 'en-US': '' },
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'domElement',
|
||||
'type': 'string ',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '表示需要绑定指引的元素类名（只能是类名，若未传入则显示为上下左右居中且无指示箭头）',
|
||||
'zh-CN': '设置引导框内容',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'hightBox',
|
||||
'type': 'Array ',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '添加需要高亮的元素的类名', 'en-US': '' },
|
||||
'demoId': 'dom-hight'
|
||||
},
|
||||
{
|
||||
'name': 'classes',
|
||||
'type': 'string ',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '要添加到步骤的内容元素的一串额外类', 'en-US': '' },
|
||||
'demoId': 'guide-poistion-crossAxis'
|
||||
},
|
||||
{
|
||||
'name': 'beforeShow',
|
||||
'type': 'Fnction ',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '展示前回调', 'en-US': '' },
|
||||
'demoId': 'callback'
|
||||
},
|
||||
{
|
||||
'name': 'beforeHide',
|
||||
'type': 'Fnction ',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '隐藏前回调', 'en-US': '' },
|
||||
'demoId': 'callback'
|
||||
},
|
||||
{
|
||||
'name': 'hide',
|
||||
'type': 'Fnction ',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '隐藏回调', 'en-US': '' },
|
||||
'demoId': 'callback'
|
||||
},
|
||||
{
|
||||
'name': 'cancel',
|
||||
'type': 'Fnction ',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '关闭取消回调', 'en-US': '' },
|
||||
'demoId': 'callback'
|
||||
},
|
||||
{
|
||||
'name': 'destroy',
|
||||
'type': 'Fnction ',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '销毁回调', 'en-US': '' },
|
||||
'demoId': 'callback'
|
||||
},
|
||||
{
|
||||
'name': 'complete',
|
||||
'type': 'Fnction ',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '完成回调', 'en-US': '' },
|
||||
'demoId': 'callback'
|
||||
},
|
||||
{
|
||||
'name': 'button',
|
||||
'type': 'Array ',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '表示需要设置的按钮组', 'en-US': '' },
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'button.text',
|
||||
'type': 'string ',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '表示需要设置的按钮名', 'en-US': '' },
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'button.action',
|
||||
'type': 'string ',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': "表示需要执行的步骤，包含'next(下一步)、back(返回)、complete(完成)'", 'en-US': '' },
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'button.classes',
|
||||
'type': 'string ',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '表示可以为按钮设置的样式类名', 'en-US': '' },
|
||||
'demoId': 'title-steps'
|
||||
},
|
||||
{
|
||||
'name': 'button.secondary',
|
||||
'type': 'boolean ',
|
||||
'defaultValue': 'false',
|
||||
'desc': { 'zh-CN': '表示为按钮设置透明样式', 'en-US': '' },
|
||||
'demoId': 'content-steps'
|
||||
'demoId': 'highlight-box'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
'types': [
|
||||
{
|
||||
name: 'IDomData',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IDomData {
|
||||
// 指引的标题
|
||||
title: string
|
||||
// 指引的内容（可以是 html）
|
||||
text: string
|
||||
// 需要绑定指引的元素类名（只能是类名，若未传入则显示为上下左右居中且无指示箭头）
|
||||
domElement: string
|
||||
// 添加需要高亮的元素的类名
|
||||
hightBox: string[]
|
||||
// 要添加到步骤的内容元素的一串类名
|
||||
classes: string
|
||||
|
||||
// 展示前的回调函数
|
||||
beforeShow: () => void
|
||||
// 隐藏前的回调函数
|
||||
beforeHide: () => void
|
||||
// 显示的回调函数
|
||||
show: () => void
|
||||
// 隐藏的回调函数
|
||||
hide: () => void
|
||||
// 关闭的回调函数
|
||||
cancel: () => void
|
||||
//销毁的回调函数
|
||||
destroy: () => void
|
||||
// 完成的回调函数
|
||||
completey: () => void
|
||||
|
||||
// 需要设置的按钮组
|
||||
button: {
|
||||
// 按钮名
|
||||
text: string
|
||||
// 需要执行的步骤，包含 next(下一步)、back(返回)、complete(完成)
|
||||
action: 'next' | 'back' | 'complete'
|
||||
// 按钮的类名
|
||||
classes: string
|
||||
// 是否是次要按钮
|
||||
secondary: boolean
|
||||
}[]
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'IPosition',
|
||||
type: 'type',
|
||||
code: `
|
||||
type IPosition = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
|
||||
`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue