Vue自定义指令的妙用

Vue自定义指令的妙用

在使用 Element 组件库时，有些需求功能是组件库不带有的，使用了自定义指令来解决这些问题

代码仓库vue-element-utils
也提供了 npm 包下载使用

yarn add vue-element-utils
npm install vue-element-utils

入口文件引入：

import elementUtils from 'vue-element-utils'

Vue.use(elementUtils);

例如：

• Select 滚动加载(懒加载)
• Dialog 拖拽位置
• Dialog 拖拽宽高

Vue自定义指令概念

Vue 提供了内置指令v-model,v-show等，也允许注册自定义指令。多数情况中代码的复用和抽象的主要形式是组件。有的情况你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

钩子函数

• bind: 只调用一次，指令第一次绑定到元素时调用。这里可以进行一次性的初始化设置
• inserted: 被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）
• update: 所在组件的 VNode 更新时调用
• componentUpdated: 所在组件的 VNode 及其子 VNode 全部更新后调用
• unbind: 只调用一次，指令与元素解绑时调用

钩子函数参数

除了el之外，其它参数都应该是只读的。如果需要在钩子之间共享数据，建议通过元素的dataset来进行。

• 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 编译生成的虚拟节点
• oldVnode: 上一个虚拟节点, 仅在update和componentUpdated钩子中可用

Select 滚动加载（懒加载）

当 Select 组件需要展示的数据非常多的时候，滚动加载可以作为一种优化手段，当然还有其它更好的方式，可以参考Vue项目优化总结。

展示：

export default {
    bind(el, binding) {
        // 获取 element-ui 定义好的 scroll 盒子
        const selectWrap = el.querySelector(
            '.el-select-dropdown .el-select-dropdown__wrap'
        );

        selectWrap.addEventListener('scroll', function() {
            /**
             * scrollHeight 获取元素内容高度（只读）
             *
             * scrollTop 获取或者设置元素的偏移量，常用于：计算滚动条的位置，当一个元素的容器没有产生方向的滚动条，那它的 scrollTop 的值默认为0
             *
             * clientHeight 读取元素的可见高度（只读）
             *
             * 如果元素滚动到底, 等式`ele.scrollHeight - ele.scrollTop === ele.clientHeight;`返回 true, 没有则返回 false
             */
            const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
            condition && binding.value();
        });
    }
}

Dialog 拖动

展示：

export default {
    bind(el) {
        const dialogHeaderEl = el.querySelector('.el-dialog__header');
        const dragDom = el.querySelector('.el-dialog');
        dialogHeaderEl.style.cssText += ';cursor:move;';

        // 获取原有属性 ie dom 元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);

        dialogHeaderEl.onmousedown = (e) => {
            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX - dialogHeaderEl.offsetLeft;
            const disY = e.clientY - dialogHeaderEl.offsetTop;

            // 获取到的值带 px 正则匹配替换
            let styL, styT;

            // 注意在 ie 中 第一次获取到的值为组件自带 50% 移动之后赋值为 px
            if (sty.left.includes('%')) {
                styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
                styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
            } else {
                styL = +sty.left.replace(/\px/g, '');
                styT = +sty.top.replace(/\px/g, '');
            }

            document.onmousemove = function(e) {
                // 通过事件委托，计算移动的距离
                const l = e.clientX - disX;
                const t = e.clientY - disY;

                // 移动当前元素
                dragDom.style.left = `${l + styL}px`;
                dragDom.style.top = `${t + styT}px`;

                //将此时的位置传出去
                //binding.value({x:e.pageX,y:e.pageY})
            };

            document.onmouseup = function(e) {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    }
}

Dialog 拖拽宽度

展示：

export default {
    bind(el) {
        const dragDom = el.querySelector('.el-dialog');
        const lineEl = document.createElement('div');
        lineEl.style =
            'width: 2px; background: inherit; height: 80%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize;';
        lineEl.addEventListener(
            'mousedown',
            function(e) {
                // 鼠标按下，计算当前元素距离可视区的距离
                const disX = e.clientX - el.offsetLeft;

                // 当前宽度
                const curWidth = dragDom.offsetWidth;

                document.onmousemove = function(e) {
                    e.preventDefault(); // 移动时禁用默认事件

                    // 通过事件委托，计算移动的距离
                    const l = e.clientX - disX;

                    dragDom.style.width = `${curWidth + l}px`;
                };

                document.onmouseup = function(e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            },
            false
        );
        dragDom.appendChild(lineEl);
    }
}

clipboard 剪切板

展示：

const eventUtil = {
    addHandler(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, handler);
        } else {
            element['on' + type] = handler;
        }
    },
    removeHandler(element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent('on' + type, handler);
        } else {
            element['on' + type] = null;
        }
    }
};

function clipboard(text) {
    return new Promise((reslove, reject) => {
        const input = document.createElement('input');
        input.setAttribute('readonly', 'readonly');
        input.setAttribute('value', text);
        document.body.appendChild(input);
        input.focus();
        input.setSelectionRange(0, 9999);
        if (document.execCommand('copy')) {
            document.execCommand('copy');
            reslove(text);
        } else {
            reject(new Error('复制失败'));
        }
        document.body.removeChild(input);
    });
}
const $clipboard = clipboard;

export {
    $clipboard
}

export default {
    bind: function(el, binding, vnode) {
        if (binding.arg === 'success') {
            el._clipboard_success = binding.value;
        } else if (binding.arg === 'error') {
            el._clipboard_error = binding.value;
        } else {
            el._clipboard_message = binding.value;
            eventUtil.addHandler(el, 'click', () => {
                // log(el._clipboard_message);
                clipboard(el._clipboard_message).then(msg => {
                    el._clipboard_success(msg);
                }).catch(err => {
                    el._clipboard_error(err);
                });
            });
        }
    },
    unbind: function (el, binding) {
        if (binding.arg === 'success') {
            delete el._clipboard_success;
        } else if (binding.arg === 'error') {
            delete el._clipboard_error;
        } else {
            delete el._clipboard_message;
            eventUtil.removeHandler(el, 'click');
        }
    }
}

结语

将一些操作 DOM 的方法改为指令方式使用，在 Vue 中可以大大减轻工作量

将一些拓展性高的自定义指令打包到npm上，多个项目都可以使用，减少Ctrl C代码，且可维护性高，也方便有相同需求的同学可以直接使用