先赞再看，养成习惯。原创不易，共同学习！
先看效果：
image.png
一、安装依赖：
插件名称：vue-monoplasty-slide-verify
npm install --save vue-monoplasty-slide-verify
可在 npm 官网搜索 vue-monoplasty-slide-verify 查看相关API。
二、使用插件：
在main.js中引入插件。
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);
在组件中使用：
<template>
<el-card>
<div class="page-slidecode">
<slide-verify
:l="42"
:r="10"
:w="310"
:h="155"
:imgs="bgimgs"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
:slider-text="text"
></slide-verify>
<div>{{msg}}</div>
</div>
</el-card>
</template>
<script>
import aa from "@/assets/image/aa.jpg" // 如果使用网络图片资源就无需引入
import bb from "@/assets/image/bb.jpg" // 如果使用网络图片资源就无需引入
import cc from "@/assets/image/cc.jpg" // 如果使用网络图片资源就无需引入
import dd from "@/assets/image/dd.jpg" // 如果使用网络图片资源就无需引入
import ee from "@/assets/image/ee.jpg" // 如果使用网络图片资源就无需引入
export default {
data() {
return {
msg: "",
bgimgs:[ aa, bb, cc, dd, ee, ],
// bgimgs:[], // 如果使用网络图片资源就用该值
text: "向右滑动~"
};
},
methods: {
onSuccess() {
this.msg = "登录成功~";
},
onFail() {
this.msg = "登录失败！";
},
onRefresh() {
this.msg = "重新生成验证码";
}
}
};
</script>
各位小伙伴有什么疑问，欢迎留言探讨。
参考文档：https://blog.csdn.net/monoplasty/article/details/85016089
