1.下載插件 `npm install --save vue-monoplasty-slide-verify ` 2.引入main.js ``` import SlideVerify from 'vue-monoplasty-slide-verify' Vue.use(SlideVerify) ``` 3.使用 ``` //點擊按鈕（演示） <el-form-item prop="status"> <el-button type="warning" @click="verifyClick" >驗證碼</el-button> </el-form-item> //滑塊驗證彈窗 <el-dialog v-if="dialogVisible" append-to-body :visible.sync="dialogVisible" width="40%" center destroy-on-close> <!-- w:寬 h：高 l：?? r：?? --> <slide-verify :l="42" :r="10" :w="500" :h="180" :imgs="verifyImgs" slider-text="安全檢測，向右滑動" @success="onSuccess" @fail="onFail" @refresh="onRefresh" ></slide-verify> <div>{{ msg }}</div> </el-dialog> ``` ``` 校驗規則： var validatestatus = (rule, value, callback) => { if (!value) { callback(new Error("請拖動滑塊完成驗證")); } else { callback(); } }; form_rules: { status: [{ validator: validatestatus, trigger: "change" }], } ``` ``` 方法： // 成功方法 onSuccess () { this.msg = '驗證成功'; this.$message.success('驗證成功'); this.login_form.status = true; this.dialogVisible = false; }, //失敗方法 onFail () { this.login_form.status = false; this.msg = '驗證失敗'; }, //驗證碼刷新按鈕事件 onRefresh(){ this.msg = ''; }, // 點擊彈出驗證碼對話框 verifyClick(){ this.dialogVisible = true; } ```