vue-directives-hancye/index.js

hancye自用的一些vue指令

let fn = () => {}
const dragObj = {
  target: 0,
  drag(dom) {
    dom.style.display = 'none'
  },
  dragover(dom) {
    dom.style.background = 'orange'
  },
  dragleave(dom, { index }) {
    dom.style.background = '#333'
    dragObj.target = index
  },
  dragend(dom, { index, list }) {
    dom.style.display = 'block'
    // 不能使用item的原因是因为item没有改变,再次拖拽依然是item
    // 防止删除后修改数组下标,需要先储存这个变量
    const item = list[index]
    // console.log(dragObj.target)
    // 先判断后删除数组中的项
    if (dragObj.target === list.length - 1) {
      list.splice(index, 1)
      list.splice(dragObj.target - 1, 0, item)
    } else {
      list.splice(index, 1)
      list.splice(dragObj.target, 0, item)
    }
  }
}
const obj = {
  img: {
    inserted (dom, obj) {
      dom.src = dom.src || obj.value || require('@/assets/common/img.jpeg')
      dom.onerror = () => {
        dom.src = obj.value || require('@/assets/common/img.jpeg')
      }
    },
    componentUpdated (dom, obj) {
      dom.src = dom.src || obj.value || require('@/assets/common/img.jpeg')
    }
  },
  clickOut: {
    inserted (dom, obj) {
      fn = e => {
        if (!dom.contains(e.target)) {
          obj.value()
        }
      }
      document.addEventListener('click', fn)
    },
    unbind () {
      document.removeEventListener('click', fn)
    }
  },
  dragSort: {
    inserted(dom, obj) {
      // dom.addEventListener('click', console.log(111)
      dom.addEventListener('drag', () => { dragObj.drag(dom, obj.value) })
      dom.addEventListener('dragover', () => { dragObj.dragover(dom, obj.value) })
      dom.addEventListener('dragleave', () => { dragObj.dragleave(dom, obj.value) })
      dom.addEventListener('dragend', () => { dragObj.dragend(dom, obj.value) })
    }
  }
}

export default {
  install(Vue) {
    // 循环注册全局指令
    for (const key in obj) {
      Vue.directive(key, obj[key])
    }
  }
}