先贊再看凌节，養(yǎng)成習(xí)慣洒擦。原創(chuàng)不易，共同學(xué)習(xí)逾柿！
先看效果：
image.png
一缀棍、安裝依賴：
插件名稱：vue-monoplasty-slide-verify
npm install --save vue-monoplasty-slide-verify
? 可在 npm 官網(wǎng)搜索 vue-monoplasty-slide-verify 查看相關(guān)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" // 如果使用網(wǎng)絡(luò)圖片資源就無需引入
import bb from "@/assets/image/bb.jpg" // 如果使用網(wǎng)絡(luò)圖片資源就無需引入
import cc from "@/assets/image/cc.jpg" // 如果使用網(wǎng)絡(luò)圖片資源就無需引入
import dd from "@/assets/image/dd.jpg" // 如果使用網(wǎng)絡(luò)圖片資源就無需引入
import ee from "@/assets/image/ee.jpg" // 如果使用網(wǎng)絡(luò)圖片資源就無需引入
export default {
data() {
return {
msg: "",
bgimgs:[ aa, bb, cc, dd, ee, ],
// bgimgs:[], // 如果使用網(wǎng)絡(luò)圖片資源就用該值
text: "向右滑動~"
};
},
methods: {
onSuccess() {
this.msg = "登錄成功~";
},
onFail() {
this.msg = "登錄失敗弱匪！";
},
onRefresh() {
this.msg = "重新生成驗證碼";
}
}
};
</script>
? 各位小伙伴有什么疑問青瀑，歡迎留言探討。
參考文檔：https://blog.csdn.net/monoplasty/article/details/85016089
