VUE通用指令、过滤器的封装和使用

一、指令的封装

import Vue from 'vue';

export const viewImage = Vue.directive('view-image', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
        el.style.cursor = 'pointer';
        el.title = '点击可查看大图';

        // 图片
        let img = document.createElement('img');
        // 图片外壳
        let imgBox = document.createElement('div');
        // 这个查看图片包含框
        let div = document.createElement('div');
        let closeBox = document.createElement('span');
        // 查看大图的关闭按钮
        closeBox.innerText = '×';
        closeBox.className = 'close';

        div.className = 'view-image-container';
        imgBox.appendChild(img);
        imgBox.appendChild(closeBox);
        div.appendChild(imgBox);
        div.style.visibility = 'hidden';

        document.body.appendChild(div);

        el.addEventListener('click', function () {
            img.src = el.src;
            div.style.visibility = 'visible';
        });

        // 点击关闭按钮隐藏查看大图
        closeBox.addEventListener('click', function () {
            div.style.visibility = 'hidden';
        });
    }
});

1. Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。上面是我写的一个查看大图的指令，主要应用场景是对使用图片标签展示的地方，有查看大图的需要，指令通过绑定指令v-view-image就可以实现点击查看大图的效果。
2. inserted关键字是自定义指令中的钩子函数（点击此处查看钩子函数详解），会在指令被绑定元素插入父节点时调用。钩子函数中的参数，可以查阅文档进行对应应用场景的使用。
3. 我在该自定义指令中，主要使用对el元素对象的操作，基本实现逻辑为 获取到被绑定元素的src图片路径，然后展示到查看大图元素中的图片路径。
4. 只需在main.js文件中对指令进行引入，例如 import { viewImage } from './directive/view-image' 就可以在全局正常使用，不需要再在单个组件中引入使用。具体使用方法例如：就可以使用。

二、过滤器的封装

Vue.filter('idToName', function(id, arr) {
  // 如果传入id为空，返回空字符串
  if (!value) return '';
  // 如果基础数组数据为空或者未定义，直接返回id值
  if (!arr || arr.length === 0) {
    return id;
  }
  let name = '';
  arr.forEach(item => {
    // 获取到所属name，直接return跳出遍历
    if (item.id === id) {
      return name = item.name;
    }
  })

  return name;

})

1. 在vue项目中，会有常用场景需要对数据做处理，这时候就可以应用过滤器进行使用。推荐使用上述方法进行全局过滤器定义，相较于对组件内定义来说，优点是可以全局使用，避免重复代码，可以放在同一个文件夹中进行统一维护处理。
2. 上述过滤器是常用的对例如字典数据进行id转换为name的处理，需要传入的参数为id和数据源数组。具体使用方法为：{{ id| idToName(arr) }}，需要提醒的一点是，v-model双向绑定指令不能使用过滤器。被过滤的值，会被当成默认的第一个参数传入，所以此处过滤器的传入参数只需一个参数arr。详细的过滤器使用及参数使用概念可以参考官方文档