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

Z时代
2024-02-26
分类：IT

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

回答：

类似的有很多呀, 题主说都是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 = ''
}
}}