vue移动端 有滑动解锁组件吗?

作者站长头像
站长
· 阅读数 22

问题描述:找了好多资料都是pc端的

回复
1个回答
avatar
test
2024-07-10

类似的有很多呀, 题主说都是PC, 但其实只要根据移动端样式适配一下, 数据调一下, 方法名改一下就行了

第一步:npm install --save vue-monoplasty-slide-verify

第二步:main.js配置

import Vue from 'vue';

import SlideVerify from 'vue-monoplasty-slide-verify';

Vue.use(SlideVerify);

第三步:vue页面或组件:

// template
<slide-verify :l="42"
:r="10"
:w="310"
:h="155"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
:slider-text="text"
></slide-verify>
<div>{{msg}}</div>
// script
export default {
name: 'App',
data(){
return {
msg: '',
text: '向右滑',
}
},
methods: {
onSuccess(){
this.msg = '成功'
},
onFail(){
this.msg = ''
},
onRefresh(){
this.msg = ''
}
}
}

链接:https://www.jianshu.com/p/169...

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容