vue自定义指令

分享一下自己写的一些vue自定义指令

1、自动获取输入框的焦点

autoFocus: {
        inserted: function (el) {
          el.focus()
          // el.querySelector('input').focus()//elementui的el-input版本
        }
      },

2、列表拖拽排序

dragSort: {
        /*
        * @params bingding: {
        *      @params index: number,//当前索引
        *      @params list: Array//列表
        * }
        * */
        inserted: function (el, binding) {
          el.setAttribute('draggable', 'true');
          el.addEventListener('dragstart', function (e) {
            e.dataTransfer.setData('index', binding.value.index);
          });
          el.addEventListener('dragover', function (e) {
            e.preventDefault();
          });
          el.addEventListener('drop', function (e) {
            e.preventDefault();
            let oldIndex = e.dataTransfer.getData('index');
            let newIndex = binding.value.index;
            if (oldIndex === newIndex) {
              return;
            }
            let list = binding.value.list;
            let newList = [...list];
            list.splice(oldIndex, 1);
            list.splice(newIndex, 0, newList[oldIndex]);
          });
        },
      },