vue之自定义指令

作用： 让最后一个元素绝对定位并尾随倒数第二个元素

Vue.directive('absolute-after', {
  /**
   * @param {Node} el
   */
  inserted(el) {
    if (el.parentNode.childNodes.length >= 2 && el.parentNode.lastChild === el) {
      const pHeight = $(el).prev('*')
        .height();
      const pWidth = $(el).prev('*')
        .width();
      const cHeight = $(el).height();
      $(el).css({
        position: 'absolute',
        left: pWidth,
        top: (pHeight - cHeight) / 2,
      });
    }
  },
});

作用： v-dialogdragwidth： 弹窗宽度拖大 拖小

// v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive('dialogDragWidth', {
  bind(el, binding, vnode, oldVnode) {
    const dragDom = binding.value.$el.querySelector('.el-dialog');

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

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

        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX;
        dragDom.style.width = `${l}px`;
      };

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