1.新建一個組件 ``` <template> <div class="silder-range" :class="rangeStatus?'success':''"> <i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i> {{rangeStatus?successText:startText}} </div> </template> <script> export default { props: { //成功圖標 successIcon: { type: String, default: "el-icon-success" }, //成功文字 successText: { type: String, default: "驗證成功" }, //開始的圖標 startIcon: { type: String, default: "el-icon-d-arrow-right" }, //開始的文字 startText: { type: String, default: "拖動滑塊到最右側" } }, name: "SilderVerify", data() { return { rangeStatus:'', }; }, methods: { rangeMove(e){ let ele = e.target; let startX = e.clientX; let eleWidth = ele.offsetWidth; let parentWidth = ele.parentElement.offsetWidth; let MaxX = parentWidth - eleWidth; if(this.rangeStatus){//不運行 return false; } document.onmousemove = (e) => { let endX = e.clientX; this.disX = endX - startX; if(this.disX<=0){ this.disX = 0; } if(this.disX>=MaxX-eleWidth){//減去滑塊的寬度,體驗效果更好 this.disX = MaxX; } ele.style.transition = '.1s all'; ele.style.transform = 'translateX('+this.disX+'px)'; e.preventDefault(); } document.onmouseup = ()=> { if(this.disX !== MaxX){ ele.style.transition = '.5s all'; ele.style.transform = 'translateX(0)'; this.$emit("failed", this.rangeStatus); }else{ this.rangeStatus = true; this.$emit("success", this.rangeStatus); } document.onmousemove = null; document.onmouseup = null; } } } }; </script> <style scoped> .silder-range{ background-color: #e3e4e6; position: relative; transition: 1s all; user-select: none; color: #333; display: flex; justify-content: center; align-items: center; height: 45px; /*no*/ } .silder-range i{ position: absolute; left: 0; width: 60px;/*no*/ height: 100%; color: #919191; background-color: #fff; border: 1px solid #bbb; cursor: pointer; display: flex; justify-content: center; align-items: center; } .silder-range.success{ background-color: #7AC23C; color: #fff; } .silder-range.success i{ color: #7AC23C; } </style> ``` 2.在login表單中引入注冊`import SilderVerify from "@/components/SilderVerify";` 3.驗證 ``` var validatestatus = (rule, value, callback)=> { if (!value) { callback(new Error('請拖動滑塊完成驗證')) } else { callback() } }; status: [{ validator: validatestatus, trigger: "change" }], ``` 4.成功失敗的方法 ``` handleSuccess() { this.login_form.status = true; // this.$refs.loginFormRef.validateField("status"); console.log('成功'); }, handleError(){ // this.$refs.loginFormRef.validateField("status"); console.log('失敗'); this.login_form.status = false } ```