在vue的项目开发中一般会使用组件来进行代码复用,但是很多情况下纯粹使用组件会有一定的局限性,我们往往会追求最简洁的方式:
- 如果只是对纯文本进行处理,无疑代码封装成filter过滤器是最好的选择–可参考《vue filter 过滤器》
- 如果是一些全局性的简单动画提示组件或者方法(比如loading组件和axios方法),我们就可以考虑使用plugin插件为实例原型上添加方法以方便随时调用–可参考《vue plugin 插件编写以loading为例》
- 但是如果说我们要进行一些dom的底层操作,那么就是使用指令比较合适了
以图标点击触发区域扩大器为例:
// trigger-area.js
/**
* trigger-area 图标点击事件触发区域扩大器
* @params {element} el是目标元素
* @parmas {object} options作为控制padding的对象
* 加指令的元素必须是定位元素
* 传递参数的时候,因为考虑到居中问题,建议传递一样的参数值,确保可以居中
* 绑定指令的元素 不能设置overflow属性 否则会失去效果
*
*
* @example
* <div><i v-trigger-area:10*20*30*40></i></div>
* v-trigger-area:10 一个值代表上下左右
* v-trigger-area:10*20 两个值对应【上下】【左右】
* v-trigger-area:10*20*30 三个值对应 【上】【左右】【下】
* v-trigger-area:10*20*30*40 四个值对应 【上】【右】【下】【左】
*/
/**
* 自定义创建span节点的函数
* @param {element} $el - 目标dom元素
* @param {object} binding - 指令对象
* @return {VNode} vnode -vue节点对象
*/
function createArea($el) {
// 原生创建一个span 作为插入的虚拟节点