vue directives自定义指令应用（获取光标双击编辑，可拖拽弹窗）

一、自定义指令获取光标，实现双击表格编辑

效果图：

JS:

directives: {
// 通过自定义指令实现的表单自动获得光标的操作
focus: {
  inserted: function (el) {
    if (el.tagName.toLocaleLowerCase() == "input") {
      el.focus();
    } else {
      if (el.getElementsByTagName("input")) {
        el.getElementsByTagName("input")[0].focus();
      }
    }
    el.focus();
  },
 },
},	
methods:{	
tableDbEdit(row, column, event) {
  if (row.eleLevel != 1) {
    this.showInput = column.property + row.id;
    this.oldData[column.property] = row[column.property];
    console.log(row, column, event);
  }
},
// 当input失去光标后进行的操作
async blurInput(row, name, value) {
  let obj = {};
  // 判断数据是否有所改变，如果数据有改变则调用修改接口
  if (this.oldData[name] != value) {
    // obj[name] = value; //被改变的数据
    // 然后再写调用接口，提交内容的东西就可以了
  }
  this.showInput = "";
},
}

二、实现可拖拽的dialog弹窗

JS：

directives: {
    drag(el) {
      let oDiv = el; //当前元素
      let self = this; //上下文
      //禁止选择网页上的文字
      // document.onselectstart = function () {
      //     return false;
      // };
      oDiv.onmousedown = function (e) {
        //鼠标按下，计算当前元素距离可视区的距离
        let disY = e.clientY - oDiv.offsetTop;
        document.onmousemove = function (e) {
          //通过事件委托，计算移动的距离
          let t = e.clientY - disY;
          // console.log(t)
          // console.log(document.documentElement.clientHeight-t)
          if (t <= 90) {
            oDiv.style.top = "90px";
          } else if (document.documentElement.clientHeight - t < 120) {
            oDiv.style.top = document.documentElement.clientHeight - 120 + "px";
          } else {
            oDiv.style.top = t + "px";
          }
          //移动当前元素
          // oDiv.style.top = t + "px";
        };
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
        //return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
        return false;
      };
    },
}, 

拓展：html5 div的编辑属性contenteditable实现双击编辑

双击编辑

contenteditable 属性是 html5 中的新属性，contenteditable 属性规定元素内容是否可编辑。
可以绑定keydown 、textInput 、input等事件