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; } ```