vue滑动插件 vue-drag-verify

npm install vue-drag-verify --save

    <drag-verify 
        :width="width" 
        :height="height" 
        :text="text" 
        :circle="false"
        :success-text="successText" 
        :background="background" 
        :progress-bar-bg="progressBarBg" 
        :completed-bg="completedBg" 
        :handler-bg="handlerBg" 
        :handler-icon="handlerIcon" 
        :text-size="textSize" 
        :success-icon="successIcon"
        ref="Verify"
    >
    </drag-verify>

import dragVerify from 'vue-drag-verify'

import 'font-awesome/css/font-awesome.min.css' // 最好在main.js中引入，可以全局使用

  data() {
    return {
      handlerIcon: "fa fa-angle-double-right",
      successIcon: "fa fa-check",
      background: "#cccccc",
      progressBarBg: "#4b0",
      completedBg: "#66cc66",
      handlerBg: "#fff",
      text: "请将滑块拖动到右侧",
      successText: "验证成功",
      width: 320,
      height: 42,
      textSize: "18px"
      }
  }

components:{dragVerify},

<style scoped>
  >>>.dv_handler{height:42px !important}
</style>