Vue自定义指令实现拖动滑块验证功能

最新推荐文章于 2024-07-13 11:51:27 发布

原创

最新推荐文章于 2024-07-13 11:51:27 发布 · 441 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在Vue.js应用中利用自定义指令实现拖动滑块验证功能，从指令的创建到事件监听，再到组件交互，一步步带你构建一个完整的滑动验证解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >



<template>
  <div>
    <div class="movebox">
      <div class="movego"></div>
      <div class="txt" id="txt">拖动滑块验证</div>
      <div class="move moveBefore" v-move></div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {};
  },
  mounted() {
    //console.log($('选择器'))
  },
  methods: {},
  directives: {
    move(el) {
      el.onmousedown = function(e) {
        var X = e.clientX - el.offsetLeft;
        document.onmousemove = function(e) {
          var endx = e.clientX - X;
          el.className = "move moveBefore";
          el.style.left = endx + "px";
          // console.log(el.parentNode.children[0])
          var width = $(".movebox").width() - $(".move").width();
          el.parentNode.children[0].style.width = endx + "px";
          el.parentNode.children[1].innerHTML = "拖动滑块验证";
          //临界