更新记录
1.0.1(2023-06-03)
下载此版本
h5 移动端 滑块验证 自适应插件, 自适应自动跳转样式,修改样式,圆角
1.0.0(2023-06-03)
下载此版本
h5 移动端 滑块验证 自适应插件, 自适应自动跳转样式,修改样式,圆角
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.6.0 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
× |
× |
√ |
× |
× |
× |
× |
如使用过程中有问题或有一些好的建议,欢迎qq联系:382766756
使用方式
<template>
<view style="margin-top: 50px;">
<xz-verif @confirmFunc="confirmFunc" :boxType="boxType" style="margin: 0 auto;"></xz-verif>
<button @click="cancelFunc" style="margin-top: 50px;">重置</button>
</view>
</template>
<script>
export default {
data() {
return {
boxType:true,//完成状态
}
},
methods: {
// 滑动完成事件
confirmFunc(e){
console.log(e);
this.boxType=true
},
// 重置事件
cancelFunc(){
this.boxType=false
},
}
}
</script>
属性说明
名称 |
类型 |
默认值 |
描述 |
boxType |
Boolean |
false |
完成状态 |
boxWidth |
[Number,String] |
300 |
组件宽度 |
boxHeight |
[Number,String] |
50 |
组件高度 |
sliderText |
String |
请按住滑块拖动 |
滑块提示文字 |
succText |
String |
验证通过 |
滑块完成提示文字 |
sliderTextColor |
String |
#666 |
滑块提示文字颜色 |
succTextColor |
String |
#fff |
滑块完成提示文字颜色 |
fontSize |
Number |
1 |
字体大小,单位 em |
boxBg |
String |
#e5e5e5 |
盒子背景颜色 |
boxBarBg |
String |
#5abc3c |
盒子进度条颜色 |
boxRadius |
Number |
0 |
盒子圆角 |
boxBWidth |
Number |
0 |
盒子边框宽度 |
boxBColor |
String |
#333 |
盒子边框颜色 |
boxBStyle |
String |
solid |
盒子边框样式 |
btnColor |
String |
#333 |
按钮图标颜色 |
btnSuccColor |
String |
#5abc3c |
按钮完成 图标颜色 |
btnBg |
String |
#fff |
按钮背景颜色 |
btnSuccBg |
String |
#fff |
按钮完成 背景颜色 |
btnRadius |
Number |
0 |
按钮圆角 |
btnBWidth |
Number |
1 |
按钮边框宽度 |
btnBColor |
String |
#e5e5e5 |
按钮边框颜色 |
btnBStyle |
String |
solid |
按钮边框样式 |
事件说明
事件名 |
说明 |
返回值 |
confirmFunc |
滑动完成事件 |
Boolean |
cancelFunc |
重置事件 |
|