vue-cli 自定义指令directive 添加验证滑块示例(2)

<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 = '拖动滑块验证'
    //临界值小于
    if (endx <= 0) {
    el.style.left = 0 + 'px'
     el.parentNode.children[0].style.width = 0 + 'px'
     //$('.movego').width(0)
    }
    //临界值大于
    // console.log(el.style.left)
    if (parseInt(el.style.left) >= width) {
    el.style.left = width + 'px'
     el.parentNode.children[0].style.width = width + 'px'
     el.parentNode.children[1].innerHTML = '验证通过'
    el.className = 'move moveSuccess'
    el.onmousedown = null
    }
    }
  }
  document.onmouseup = function() {
    document.onmousemove = null
  }
  }
 }
}

</script>