效果圖

使用步驟

第一步：下載安裝包

npm install --save vue-monoplasty-slide-verify

第二步：在main.js里添加代碼

import SlideVerify from 'vue-monoplasty-slide-verify';Vue.use(SlideVerify);

第三步：在頁面中使用

<template><div><slide-verify:l="42":r="10":w="310":h="155"slider-text="向右滑動"@success="onSuccess"@fail="onFail"@refresh="onRefresh"style="position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);"></slide-verify></div> </template><script> export default {name: "App",data() {return {};},methods: {onSuccess(e) {console.log("驗證成功");console.log(e);},onFail() {console.log("onFail");},onRefresh() {console.log("onRefresh");},},components: {}, }; </script><style> </style>

可穿插在某個頁面使用

總結(jié)

以上是生活随笔為你收集整理的vue图片滑动验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。