JcRangeImg.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <drag-verify
  3. :width="width"
  4. :height="height"
  5. :text="text"
  6. :success-text="successText"
  7. :background="background"
  8. :progress-bar-bg="progressBarBg"
  9. :completed-bg="completedBg"
  10. :handler-bg="handlerBg"
  11. :handler-icon="handlerIcon"
  12. :text-size="textSize"
  13. :success-icon="successIcon"
  14. ref="Verify"
  15. @passcallback="passcallback2">
  16. </drag-verify>
  17. </template>
  18. <script>
  19. import Vue from 'vue'
  20. import 'font-awesome/css/font-awesome.min.css'
  21. import dragVerify from 'vue-drag-verify'
  22. export default {
  23. name: 'JcRangeImg',
  24. components:{
  25. dragVerify
  26. },
  27. props:['width','height'],
  28. data () {
  29. return {
  30. handlerIcon: "fa fa-angle-double-right",
  31. successIcon: "fa fa-check",
  32. background: "#cccccc",
  33. progressBarBg: "#4b0",
  34. completedBg: "#66cc66",
  35. handlerBg: "#fff",
  36. text: "请将滑块拖动到右侧",
  37. successText: "验证成功",
  38. textSize: "18px",
  39. isCircle:'true'
  40. }
  41. },
  42. watch:{
  43. "$refs.Verify.isPassing"(){
  44. console.log(this.$refs.Verify.isMoving)
  45. console.log(this.$refs.Verify.isPassing)
  46. console.log(this.$refs.Verify.handlerIconClass)
  47. }
  48. },
  49. methods:{
  50. passcallback2() {
  51. this.$emit('closeFa',true)
  52. },
  53. }
  54. }
  55. </script>
  56. <style scoped>
  57. </style>