npm i slider-verification-code --save
import SliderVerificationCode from 'slider-verification-code';
import 'slider-verification-code/lib/slider-verification-code.css';
Vue.use(SliderVerificationCode);
更多功能正在完善中...... 如果您有什么好的建议请留言
你可以这样使用:
<SliderVerificationCode v-model="value" />
<SliderVerificationCode height="60px" sliderWidth="120px" inactiveValue="未解锁" activeValue="已解锁" v-model="value"/>
methods:{
handleChange(value){
console.log('您验证结果为:',value);
}
}
icon: { //滑块图标
type: [String],
default: null
},
activeValue: { //滑块解锁后的值
type: [String,Boolean,Number,Object],
default: true
},
inactiveValue: { //滑块解锁前的值
type: [String,Boolean,Number,Object],
default: false
},
content: { //滑块的文字
type: [String],
default: `请拖动滑块解锁`
},
height: { //高度
type: [String],
default: `40px`
},
sliderWidth: { //滑块宽度
type: [String],
default: `40px`
},
background: { //高度
type: [String],
default: `#e8e8e8`
},
textColor: { //滑块的文字颜色
type: [String],
default: `#fff`
}
<SliderVerificationCode v-model="value">
<template slot="content">
{{ content }}
</template>
<template slot="icon">
<i class="icon icon-test" />
</template>
</SliderVerificationCode>
## 二次开发 下载项目
## Project setup git clone https://github.com/langyuxiansheng/slider-verification-code.git
cd slider-verification-code
npm install
npm run dev
npm run build
npm run test
npm run lint
- 2019年7月09日 v1.0.0
- 建立项目,发布到npm
- 2019年9月26日 v1.0.1
- 修复改变高度后滑块显示异常;
- 新增自定义解锁前后的值;
- 新增自定义滑块高度和宽度.
- v1.0.0的源码在 v1.0.0的分支上.
- 2019年11月27日 v1.0.2
- 新增兼容移动端的事件绑定;
- 2019年11月28日 v1.0.3
- 修复滑块宽度缩小漏出背景色的bug;
- 修复屏幕宽度缩小后进度条显示异常;
- 修复重置值之后,样式未初始化的bug;
- 感谢各位道友的反馈.o( ̄︶ ̄)o