dev/dcp-web-gate/src_old/components/JcRangeImg.vue

<template>
    <drag-verify 
        :width="width" 
        :height="height" 
        :text="text" 
        :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"
        @passcallback="passcallback2">
    </drag-verify>
</template>
<script>
import Vue from 'vue'
import 'font-awesome/css/font-awesome.min.css'
import dragVerify from 'vue-drag-verify'
 
export default {
  name: 'JcRangeImg',
  components:{
    dragVerify
  },
  props:['width','height'],
 data () {
    return {
      handlerIcon: "fa fa-angle-double-right",
      successIcon: "fa fa-check",
      background: "#cccccc",
      progressBarBg: "#4b0",
      completedBg: "#66cc66",
      handlerBg: "#fff",
      text: "请将滑块拖动到右侧",
      successText: "验证成功",
      textSize: "18px",
      isCircle:'true'
    }
  },
  watch:{
    "$refs.Verify.isPassing"(){
        console.log(this.$refs.Verify.isMoving)
        console.log(this.$refs.Verify.isPassing)
        console.log(this.$refs.Verify.handlerIconClass)
    }
  },
  methods:{
    passcallback2() {
        this.$emit('closeFa',true)
    },
  }
}
</script>
<style scoped>

</style>