首页 > 其他分享 >Vue开源插件之滑块验证

Vue开源插件之滑块验证

时间:2023-03-06 20:12:05浏览次数:35  
标签:初始化 插件 Vue 滑块 验证 失败 result huakuai

1. 演示

成功:

失败:

失败过多:

初始化:

2.安装及使用:

安装:

npm install huakuai-vue --save

main.js使用:

import huakuai from 'huakuai-vue'
Vue.use(huakuai)

全局就可以使用了,不需要在注册

<hua-kuai></hua-kuai>

事件参数:

事件名 类型 描述
verify 事件 判断用户滑动验证是否通过,成功为true,失败三次为false
refresh 事件 用户失败三次点击了初始化按钮

示例:

<template>
  <div class=''>
    <hua-kuai @verify='verify' @refresh='refresh'></hua-kuai>
  </div>
</template>
<script>
// import huakuai from './components/huakuai'
export default {
  // components:{
  //   huakuai
  // }
  methods:{
    verify(result){
      console.log(result) // result为true表示验证通过,false表示验证三次都失败了哦
    },
    refresh(){
      console.log('用户点击了初始化')
    }
  }
}
</script>
<style scoped>

</style>

标签:初始化,插件,Vue,滑块,验证,失败,result,huakuai
From: https://www.cnblogs.com/yangyezhuang/p/17185218.html

相关文章

  • vue
    一、vue指令1、内容渲染指令v-text指令会覆盖元素的内容{{}}:插值表达式只能用在元素内容节点上。不能用在属性节点v-html2、属性绑定指令v-bind:指令 缩写为:为......
  • Apinto V0.12 发布:新增流量镜像与 Mock 插件,路由特性更丰富!
    Hello~各位开发者朋友们好呀,Eolink旗下开源网关Apinto本周又更新啦!这次的更新我们给大家带来了2个好用的插件,且目前已经支持静态资源路由了!希望新的功能能让大家的......
  • SpringBoot+Vue中使用AES进行加解密(加密模式等对照关系)
    场景若依前后端分离版本地搭建开发环境并运行项目的教程:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662在上面搭建起来前后端架构之后,在前后端......
  • Vue学习笔记之ElementUI的区间设置
    <template><divclass="app-containerhome"><el-formref="form":inline="true":model="form":rules="rules"><el-form-itemprop="min"><el......
  • 基于 Rainbond 的 Pipeline(流水线)插件
    背景Rainbond本身具有基于源码构建组件的能力,可以将多种编程语言的代码编译成Docker镜像,但是在持续集成的过程中,往往会需要对提交的代码进行静态检查、构建打包以及单......
  • Vue路由传递参数
    路由配置{path:'/manage/detailgovproject',key:'detailgovproject',name:'DetailGovProject',component:DetailGovProject},fromPage.vu......
  • vue中使用动态组件
    在模板文件中引入<component:is="handleComponent"/>在js中使用consthandleView=(viewUrl)=>import('../'+viewUrl)//引入文件路径exportdefault{da......
  • vue 前端导出
    1.安装依赖npminstall-Sxlsxnpminstall-Sxlsx-style2、导出export插件封装utils/exportExcel.js/** *@file导出export插件封装 */ import*asstyle......
  • kepware高级插件IOT Gateway_Rest Client和NodeRed实操
    1,安装Kepware软件,使用Iot高级插件需要有Java环境,下载地址为: https://www.oracle.com/文件名称为:jdk-7u79-windows-i5862,RestClient配置     ......
  • Vue父子组件渲染顺序
    创建基本组件结构父组件//father.vue<template><divclass="father">父组件<span>父组件数值:{{val}}</span><button@click="add">父......