拖拽dom宽度的指令

        在实际工作中，经常遇到文本太长，无法完全展示，虽然采用省略显示，鼠标hover，通过tips显示完整文本，但是并不直观，尤其在树形、卡片等展示形式时。

        为提高用户交互体验，采用拖拽外层dom元素，改变整个容器的宽度，内部dom宽度自适应，显示文本随宽度变化而改变。具体效果如下图，  鼠标悬浮在容器右侧，左右拖拽，可动态改变容器宽度

  

import Vue from 'vue';
// v-dragWidth: 标签宽度拖大 拖小。可以传参来控制最大宽度和最小宽度，最小宽度默认是300px
// 例： v-dragWidth="{minwidth:'300px',maxwidth:'500px'}"
Vue.directive('dragWidth', {
  bind(el, binding) {
    if (binding.value) {
      el.style.minWidth = binding.value.minwidth ? binding.value.minwidth : '300px';
      el.style.maxWidth = binding.value.maxwidth ? binding.value.maxwidth : '';
    } else {
      el.style.minWidth = '300px';
    }
    el.style.cursor = 'e-resize';
    el.style.position = 'relative';
    const sty = el.currentStyle || window.getComputedStyle(el, null);
    // 增加拖拽小图标 START
    const dragIcon = () => {
      const newElement = document.createElement('div');
      newElement.style.cssText = 'width: 3px;height: 12px;position: absolute;right: -3px;top: 50%;border-left: 2px dotted #869abb;border-right: 2px dotted #869abb;background-color: #fff;';
      return newElement;
    };
    const dragIconDom = dragIcon();
    el.appendChild(dragIconDom);
    // END
    el.onmousedown = (e) => {
      const disX = e.clientX;
      let styW = '';
      styW = +sty.width.replace(/\px/g, '');
      document.onmousemove = function (ev) {
        ev.preventDefault();
        const l = ev.clientX - disX;
        el.style.width = `${styW + l}px`;
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  }
});