php短视频源码，两种基础的滑块组件验证

1、基本滑块验证组件

// 安装<br>npm i vue-drag-verify2 -S<br>// 引用： main.js 中引用<br>import Vue from 'vue'<br>import dragVerify from 'vue-drag-verify2'<br>Vue.use(dragVerify)<br><template><br>  <div><br>    <h3>模块验证：</h3><br>    <div class="verifybox"><br>      <el-row style="margin-top:10px;"><br>        <drag-verify ref="dragVerify" :width="300" :isPassing.sync="isPassing" text="请按住滑块拖动" successText="验证通过"<br>          handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check" @passcallback="passcallback"><br>          <i v-show="!isPassing" slot="textBefore" class="el-icon-lock"></i><br>        </drag-verify><br>      </el-row><br>      <el-button style="margin-top:5px;margin-left:10px;" size="small" @click="reset">还原</el-button><br>    </div><br>  </div><br></template><br><script><br>  export default {<br>    data() {<br>      return {<br>        isPassing: false<br>      }<br>    },<br>    methods: {<br>      passcallback() {<br>        this.$message({<br>          message: "验证通过",<br>          type: "success"<br>        });<br>      },<br>      reset() {<br>        this.isPassing = false;<br>        this.$refs.dragVerify.reset()<br>      },<br>    },<br>  }<br></script><br><style><br>  .verifybox {<br>    display: flex;<br>  }<br></style>

2、图片滑块组件

// 安装<br>npm i vue-drag-verify-img -S<br><template><br>  <div><br>    <h3>图片滑块：</h3><br>    <dragVerifyImg ref="dragVerify" :imgsrc=" imgsrc" :isPassing.sync="isPassing" :showRefresh="true" text="请按住滑块拖动"<br>      successText="验证通过" handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check"<br>      @passcallback="passcallback"><br>    </dragVerifyImg><br>    <el-button type="primary" @click="reset">还原</el-button><br>  </div><br></template><br><script><br>  import dragVerifyImg from 'vue-drag-verify-img'<br>  export default {<br>    data() {<br>      return {<br>        isPassing: false,<br>        value: "",<br>        imgsrc: "http://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-04/26/y3zT5phpCPlkxi1650939813220426.jpg"<br>      }<br>    },<br>    components: {<br>      dragVerifyImg<br>    },<br>    methods: {<br>      passcallback() {<br>        this.$message({<br>          message: "验证通过",<br>          type: "success"<br>        });<br>      },<br>      reset() {<br>        this.isPassing = false;<br>        this.$refs.dragVerify.reset()<br>      },<br>    },<br>  }<br></script><br><style><br>  .verifybox {<br>    display: flex;<br>  }<br></style>

以上就是 php短视频源码，两种基础的滑块组件验证，更多内容欢迎关注之后的文章