更新记录
1.1.0(2021-08-27) 下载此版本
1、新增向上滚动; 2、修改下一步和完成的样式;
1.0.0(2021-08-26) 下载此版本
首次上传
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
操作指引提示useTips
根据元素的class或者id来决定提示框的位置
使用说明
属性 | 类型 | 说明 |
---|---|---|
list | Array | 提示信息列表 |
show | Boolean | 是否显示提示,默认为true |
offset | String,Number | 提示语的距离显示框的偏移值,默认为40 |
duration | String,Number | 动画时间和滚动时间,默认为300,单位ms |
borderRadius | String,Number | 显示框的圆角,默认为16,单位rpx |
padding | String,Number | 显示框的外边距,默认10,单位rpx |
nextText | String | 下一步操作的文字描述,默认“下一步” |
finishText | String | 最后一步操作的文字描述,默认“完成” |
@next | Function | 下一步操作的触发事件 |
@finish | Function | 完成操作的触发事件 |
插槽
slot | 说明 |
---|---|
- | 提示插槽,小程序不能用插槽 |
list的数据格式:[{name:"tips1",element: '#tips1',content: '这是tips1'},...]
name为插槽名
element为元素的class或者id
content为提示语
<template>
<view>
<useTips :list="list" padding="20">
<view slot="tips4">
我是#tips4的slot
</view>
<view slot="tips2">
我是.tips2的slot
</view>
</useTips>
<view id="tips1" class="tips1"></view>
<view class="tips2"></view>
<view class="tips3"></view>
<view id="tips4" class="tips4"></view>
<view id="tips5" class="tips5"></view>
<view id="tips6" class="tips6"></view>
<view id="tips7" class="tips7"></view>
<view id="tips8" class="tips8"></view>
</view>
</template>