@tplc/wot
Version:
154 lines (131 loc) • 2.88 kB
text/typescript
import type { PropType } from 'vue'
import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp, makeArrayProp } from '../common/props'
export interface TourStep {
/**
* 需要高亮的元素选择器
*/
element: string
/**
* 引导文字内容
*/
content: string
}
export const tourProps = {
...baseProps,
/**
* 是否显示引导组件，使用 v-model 绑定
* 类型：boolean
* 默认值：false
*/
modelValue: makeBooleanProp(false),
/**
* 引导步骤列表
* 类型：array
* 默认值：[]
*/
steps: makeArrayProp<TourStep>(),
/**
* 引导框的current
* 类型：number
* 默认值：0
*/
current: makeNumberProp(0),
/**
* 蒙版是否显示
* 类型：boolean
* 默认值：true
*/
mask: makeBooleanProp(true),
/**
* 蒙版颜色（支持 rgba 格式）
* 类型：string
* 默认值：'rgba(0, 0, 0, 0.5)'
*/
maskColor: makeStringProp('rgba(0, 0, 0, 0.5)'),
/**
* 引导框与高亮元素之间的间距
* 类型：number
* 默认值：20
*/
offset: makeNumberProp(20),
/**
* 动画持续时间（毫秒）
* 类型：number
* 默认值：300
*/
duration: makeNumberProp(300),
/**
* 高亮区域的圆角大小
* 类型：number
* 默认值：8
*/
borderRadius: makeNumberProp(8),
/**
* 高亮区域的内边距
* 类型：number
* 默认值：8
*/
padding: makeNumberProp(8),
/**
* 上一步按钮文字
*/
prevText: makeStringProp('上一步'),
/**
* 下一步按钮文字
*/
nextText: makeStringProp('下一步'),
/**
* 跳过按钮文字
*/
skipText: makeStringProp('跳过'),
/**
* 完成按钮文字
*/
finishText: makeStringProp('完成'),
/**
* 安全偏移量，用于滚动计算时确保元素周围有足够的空间
* 类型：number
* 默认值：100
*/
bottomSafetyOffset: makeNumberProp(100),
/**
* 顶部安全偏移量，用于滚动计算时确保元素周围有足够的空间
* 类型：number
* 默认值：0
*/
topSafetyOffset: makeNumberProp(0),
/**
* 是否自定义顶部导航栏
* 类型：boolean
* 默认值：false
*/
customNav: makeBooleanProp(false),
/**
* 点击蒙版是否可以下一步
* 类型：boolean
* 默认值：false
*/
clickMaskNext: makeBooleanProp(false),
/**
* 高亮区域样式
* 类型：object
* 默认值：{}
*/
highlightStyle: {
type: Object as PropType<Record<string, any>>,
default: () => ({})
},
/**
* 引导框的层级
* 类型：number
* 默认值：999998
*/
zIndex: makeNumberProp(999998),
/**
* 是否显示引导按钮
* 类型：boolean
* 默认值：true
*/
showTourButtons: makeBooleanProp(true)
}
export type TourProps = typeof tourProps