vue2 常用的自定义指令

自定义指令：监听元素尺寸变化

export default {
  bind(el, binding) {
    let resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        let { width, height } = entry.contentRect
        binding.value(width, height)
      }
    })
    resizeObserver.observe(el)
    el.__resizeObserver__ = resizeObserver
  },
  unbind(el) {
    if (el.__resizeObserver__) {
      el.__resizeObserver__.disconnect()
    }
  }
}

/**
 * 使用方法
 * initImage：元素尺寸变化执行方法
 */
<div v-resize="initImage"></div>

自定义指令：按钮权限

export default {
  bind(el, binding) {
    // 获取储存在vuex中的用户权限
    const { auth_list } = store.state.userData;
    // 判断是否用户是否拥有此权限
    if (!auth_list.includes(binding.value)) {
        el.parentNode.removeChild(el)
    }
  }
}

/**
 * 使用方法
 * admin：按钮对应权限
 */
<div v-permission="admin"></div>