vue2.0自定义指令

前面一片文章说了vue2.0过滤器，其实自定义指令跟过滤器非常相似，单就定义方式而言，其与过滤器完全一致，分为局部指令，和全局指令。不过就是filter改为directive的区别。

过滤器一般用于对一些常见文本的格式化，而自定义指令主要是为了对底层DOM实现操作，虽然说vue主要是以数据驱动视图，但是总有一些只能操作DOM的应用场景，例如最常见的：拖拽。此时，就是自定义指令大显身手的时候了。

在移动端，常见这么一个需求，以微信为例，在微信主屏左右滑动时候，可以随着滑动法相更改工具栏，也就是随着滑动，可以在“微信”、“通讯录”、“发现”、“我”之间随意切换。
这类需求，必须是操作DOM实现的，而无法通过数据来驱动，所以这时候，不管是你使用插件，还是自己定义，必然都是通过自定义指令来实现左右滑动，而切换工具栏的。

为了方便操作，以tab切换为例：

  <ul class="tabs">
    <router-link to="/home" tag="li"><span>首页</span></router-link>
    <router-link to="/product" tag="li"><span>产品</span></router-link>
    <router-link to="/about" tag="li"><span>关于我们</span></router-link>
  </ul>

　　在router-view上左右滑动，切换路由：

<router-view v-swipe-horizontal v-animate-css="'bounceInLeft'" appear></router-view>

　　我是利用Vue Animate Css来为路由切换添加了一个动画的效果，这里暂不关注。这里需要关注的就是v-swipe-horizontal，“v-”是vue中约定的各种指令的写法，所以其实真正的指令是swipe-horizontal，那么怎么定义swipe-horizontal呢？

　　全局定义：　

// 注册一个全局自定义指令 `v-focus`
Vue.directive('swipe-horizontal', {
  bind: function (el, binding, vnode, oldVnode) {
    // 各种逻辑操做，这个指令中就是滑动的逻辑

  }
})

　　局部定义：

　　

swipeHorizontal:{
      bind(el, binding, vnode){
        /**
         * 当前这种做法就完全依赖于路由配置的顺序需要和tab选项卡保持一致，
         * 并且不能随意添加其他位置的路由了
         * 如果通过为每一个路由对象的index使用数组的find方法查找的话，
         * 则需要为路由对象添加index属性
         */
        /* // 利用路由配置数组自身的顺序进行判断
        let routes = vnode.context.$router.options.routes,
            xc = routes.find((item, index)=>{
              return vnode.context.$route.path == item.path
            }),
            currentRouteIndex = routes.indexOf(xc),
            nextRoute = null,
            nextIndex = null;
          */
        // 利用路有对象自定义的index属性判断
        let routes = vnode.context.$router.options.routes,
            currentRoute = vnode.context.$route.path,
            currentRouteIndex = routes.find((item)=>{
              return currentRoute == item.path
            }).index,
            nextRoute = null,
            nextIndex = null;
            var arr = routes.map((item)=>{
              return item.index
            })
            var max = Math.max(...arr)    

        el.ontouchstart = (ev)=>{
          let touch = ev.touches[0];
          let disX = touch.clientX - el.offsetLeft;
          let x = disX;
          document.ontouchmove = (ev)=>{
            let touch = ev.touches[0];
            x = touch.clientX ;
          }
          document.ontouchend = () => {
            document.ontouchmove = null;
            document.ontouchend = null;
            console.log("移动距离： ", x, disX)
            /**
             * 需要利用(routes.length-1)的原因是 路由配置最后一个对象配置了路由重定向
             */
            // 利用当前的路由对象在整个路由中的序号，即路由配置的数组的顺序
           /*  if (x - disX > 20) {
              nextIndex = (currentRouteIndex + 1) >= (routes.length-1) ? 0 : (currentRouteIndex + 1);
            } else if(disX - x > 20) {
              nextIndex = (currentRouteIndex - 1) < 0 ? routes.length -2 : (currentRouteIndex - 1);
            } */
            nextRoute = routes[nextIndex]
            if (x - disX > 20) {
              nextIndex = (currentRouteIndex + 1) > max ? 0 : (currentRouteIndex + 1);
            } else if(disX - x > 20) {
              nextIndex = (currentRouteIndex - 1) < 0 ? max :(currentRouteIndex - 1);
            }
            if (nextIndex != null) {
              // 利用路有对象自定义的index属性判断
              nextRoute = routes.find((item)=>{
                return nextIndex == item.index
              })
              //在自定义的指令中，只有通过vnode.context才能获取到vue对象
              vnode.context.$router.replace(nextRoute)
            }
          }

　　我这里提供了两种确定路由的模式，主要是确定路由路径的需要。

　　一种依赖路由数组的顺序，但是这种情况下，路由数组的顺序就必须与tab选项卡视图展示的数据保持一致。

　　另外一种是为每一个路由添加一个index属性，以确定当前tab选项卡展示的顺序。

　　自定义指令中，主要逻辑是需要存在于自定义指令的钩子函数中的，而钩子函数又分为bind，inserted，update，componentUpdated，unbind五种，我不知道有多少人能够用到所有的钩子函数，从我的角度来说，常用的钩子函数bind或者inserted，两者选择其一就可以了。

　　而钩子函数中的参数：

　　

真的已经很清楚了。

既然使用自定义指令了，那么尽量不要去修改vue的数据，但是如果非得修改，还是可以通过vnode.context获取到当前的Vue对象的，到这一步，当前这个示例，剩下的也就是一些路由操作，以及基本的数组操作了。

其实，主要的就是分清楚什么情况下使用自定义指令，自定义指令的钩子函数中el提供了当前操作的dom，binding提供了各类参数，vnode.context提供了当前的vue对象，然后就是逻辑操作了。各类需求不一致，逻辑就不可能相同，所以也没什么好说的了。