一、指令的封装
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';
});
}
});
- Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。上面是我写的一个查看大图的指令，主要应用场景是对使用图片标签展示的地方，有查看大图的需要，指令通过绑定指令v-view-image就可以实现点击查看大图的效果。
- inserted关键字是自定义指令中的钩子函数（点击此处查看钩子函数详解），会在指令被绑定元素插入父节点时调用。钩子函数中的参数，可以查阅文档进行对应应用场景的使用。
- 我在该自定义指令中，主要使用对el元素对象的操作，基本实现逻辑为 获取到被绑定元素的src图片路径，然后展示到查看大图元素中的图片路径。
- 只需在main.js文件中对指令进行引入，例如 import { viewImage } from './directive/view-image' 就可以在全局正常使用，不需要再在单个组件中引入使用。具体使用方法例如：<img src="test.png" alt="测试图片" v-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;
})
- 在vue项目中，会有常用场景需要对数据做处理，这时候就可以应用过滤器进行使用。推荐使用上述方法进行全局过滤器定义，相较于对组件内定义来说，优点是可以全局使用，避免重复代码，可以放在同一个文件夹中进行统一维护处理。
- 上述过滤器是常用的对例如字典数据进行id转换为name的处理，需要传入的参数为id和数据源数组。具体使用方法为：{{ id| idToName(arr) }}，需要提醒的一点是，v-model双向绑定指令不能使用过滤器。被过滤的值，会被当成默认的第一个参数传入，所以此处过滤器的传入参数只需一个参数arr。详细的过滤器使用及参数使用概念可以参考官方文档
