vue+简单图片滑块验证码

安装

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`
	      // }
	}
  }
}