今天来讲讲Vue的自定义指令

最新推荐文章于 2023-02-24 10:44:32 发布

原创最新推荐文章于 2023-02-24 10:44:32 发布 · 297 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #dom

Vue 专栏收录该内容

5 篇文章

订阅专栏

基于 vue 自定义指令操作DOM

先上官方网址vue自定义指令官方网址

相信用vue的各位战士们应该都会频繁地用到 v-if v-show ，这样的官方自带指令，其实我们自己也是可以写出v-eat,v-focus,v-dragMove 这样的指令的。vue官方给出的这个api就是为了让各位战士操控底层DOM的。今天以一个小例子，来谈谈自定义指令，菜鸡，你要是骂我，我就要打你，所以不准骂我。

先上官方例子

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

然后你可以在模板中任何元素上使用新的 v-focus property，如下：

<input v-focus> 
//此时的input框就会自动聚焦了，自定义指令就是这么简单 信不信

好吧，骗你的，这只是我把官方的例子贴出来说个大概，不过其实也差不多。接下来，我用我自己的例子来说明一下，最近在做基于vue的移动端项目，有这样的几个简单小需求。1.在点击列表详情后，go(-1)回到列表后，还是展示刚才的那条数据的位置，其实就是不要刷新列表，让用户方便一点直接能看到他刚才点击的那条数据；2.在某些页面我进去，必须要强制定位到头部；3.某些图标支持拖拽；4.某些小组件的展示与隐藏，就暂时先说这几个吧。

首先找一个公共方法的文件夹写一个自定义指令文件 common/directive.js
然后在vue项目的入口文件 main.js里引入

import '@/common/directive'

每一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

每一个钩子函数都有几个参数，即 el、binding、vnode 和 oldVnode，

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

第一个：不刷新列表，回到点击前的位置

Vue.directive('scrollTo', {
  inserted(el) {
    el.addEventListener('scroll', function () {
      el.dataset.scrollTop = el.scrollTop
    })
  },
  update(el, binding, vnode) {
    if (vnode.context[binding.arg]) {
      el.scrollTop = el.dataset.scrollTop
      vnode.context[binding.arg] = false
    }
  }
})

第二个：回到顶部

Vue.directive('scrollTop', {
  componentUpdated(el) {
    el.scrollTop = 0
  }
})

第三个: 拖拽

Vue.directive('dragMove', {
  bind：function(el, binding) {
    var touch, disX, disY
    el.ontouchstart = (e) => {
      if (e.touches) { //有可能对象在e上也有可能对象在e.touches[0]上
        touch = e.touches[0];
      } else {
        touch = e;
      }
      disX = touch.clientX - el.offsetLeft; //鼠标位置X减去元素距离左边距离（鼠标到元素左边的距离）
      disY = touch.clientY - el.offsetTop; //鼠标位置Y减去距离顶部距离（鼠标到元素顶部的高度）
    }
    el.ontouchmove = (e) => {
      if (e.touches) { //有可能对象在e上也有可能对象在e.touches[0]上
        touch = e.touches[0];
      } else {
        touch = e;
      }
      //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
      let left = touch.clientX - disX;
      let top = touch.clientY - disY;
      //设置边界
      let leftBorder = left < 0 ? 0 : left > window.innerWidth - el.offsetWidth ? window.innerWidth - el.offsetWidth : left;
      let topBorder = top < 0 ? 0 : top > window.innerHeight - el.offsetHeight ? window.innerHeight - el.offsetHeight : top;
      //移动当前元素
      el.style.left = leftBorder + 'px';
      el.style.top = topBorder + 'px';

      e.preventDefault(); //阻止页面的滑动默认事件
    };
    el.ontouchend = (e) => {
      // el.ontouchmove = null;
      // el.ontouchend = null;
    };

  }
})

第四个：点击其他地方关闭当前组件

Vue.directive('click-out', {
  bind: function (el, {
    value
  }) {
    document.documentElement.addEventListener('click', value, false)
  },
  unbind: function (el, {
    value
  }) {
    document.documentElement.removeEventListener('click', value, false)
  }
})