安装
npm i slider-verification-code --save
引用
import SliderVerificationCode from 'slider-verification-code';
import 'slider-verification-code/lib/slider-verification-code.css';
Vue.use(SliderVerificationCode);
使用
1、 直接使用v-model 进行绑定
<SliderVerificationCode v-model="value" />
2、也可以使用 @change="handleChange" 进行回调
methods:{
handleChange(value){
console.log('您验证结果为:',value);
}
}
props 属性可选值
export default {
data () {
return {
// value: "null",
// 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`
// }
}
}
}
