vue滑动插件 vue-drag-verify

原创
04/04 12:53
阅读数 3.2K

一、插件的安装 :

npm install vue-drag-verify --save

二、安装字体图标  font-awesome

 npm install  font-awesome --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},

通过 this.$refs.Verify.isPassing 判断是否完成验证,没验证 提示 请拖到滑块完成验证

 滑块的高度有点低,遮挡不住下面,修改下样式

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

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部