vue自定义指令

防止按钮多次点击，重复请求

export default () => {

  Vue.directive('preventReClick', {
    inserted: (el, binding, vNode) => {
      console.log('el:', el)
      console.log('el:', el.disabled)
      // el.disabled = true // Mock
      el.addEventListener('click', () => {
        console.log('指令click', el.disabled)
        if (!el.disabled) {
          el.disabled = true
          setTimeout(() => {
            el.disabled = false
          }, binding.value || 300)
        }
      })
    }
  })
}

权限按钮

import Vue from 'vue'
/*或者直接使用项目组提供的包，直接使用他的v-auth*/
export default () => {
  Vue.directive('auth', {
    inserted: (el, binding, vNode) => {
      let authList = ['200', '201']
      // console.log('auth指令：',el,binding)
      // console.log('auth指令vNode：',vNode)
      // console.log('auth指令vNode：',vNode.context.$store.state)
      authList = vNode.context.$store.state.deviceMgmt.accessList || []
      if (authList.includes(binding.value)) {

      } else {
        el.parentNode.removeChild(el)
      }
    }
  })
}

权限的几种场景：

https://www.cnblogs.com/7c89/p/15761719.html

v-auth优化：增加some等场景

v-auth传入的权限码可以是String或者Array，此外还提供跟数组some和every方法一样的修饰符。

/**
 * auth指令 v-auth="Array or String"
 * 传入的权限码可以是数组或者是字符串
 * 此外还有两个修饰符 some 和 every
 * v-auth.some="Array" 表示满足其中一个资源即可（不设置修饰符情况下默认为some）
 * v-auth.every= "Array" 表示列表的所资源必须存在
 * 调用实例：
 *  
 *  
 *  
 */

// 删除节点dom
const remove = (el) => el.parentNode.removeChild(el)

Vue.directive('auth', {
  inserted: (el, binding, vNode) => {    
    const { $root: vm } = vNode.context
    // 获取当前用户拥有的权限列表（根据自身业务获取）
    const { access } = vm.$store.state.user
    // 获取传入的权限码value（string or array）和修饰符modifiers
    let { value, modifiers } = binding

    // 判断条件：当传入的值不是数组或者字符串时，直接隐藏元素
    if (
      !(
        typeof value === 'string' ||
        value instanceof Array
      ) ||
      !value
    ) {
      remove(el)
      return console.error('please set the value to a string or array.')
    }
    
    // 判断条件：如果传入的权限码是string则转化成数组
    if (typeof value === 'string') {
      value = [value]
    }

    /**
     * 判断条件
     *  -修饰符为 every时 value数组只要有一个元素不存在access权限集内，隐藏元素
     *  -修饰符为 some或者没有时，value数组所有元素都不存在access权限集内，隐藏元素
     */ 
    if (
      (
        modifiers.every &&
        value.some(v => !access.includes(v))
      ) ||
      (
        !modifiers.every &&
        value.every(v => !access.includes(v))
      )
    ) {
      remove(el)
    }
  }
}

加载更多

import Vue from 'vue'

export default () => {
  Vue.directive('loadmore', {
    bind (el, binding) {
      console.log('指令el111：', el)
      // 获取滚动页面DOM
      const SCROLL_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      const SCROLL_DOM_ALl = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap .el-select-dropdown__list')
      SCROLL_DOM.addEventListener('scroll', () => {
        console.log('scroll')

        console.log('1', SCROLL_DOM.clientHeight)
        console.log('2', SCROLL_DOM.scrollTop)
        console.log('3', SCROLL_DOM.scrollHeight)
        console.log('4', SCROLL_DOM_ALl.clientHeight)

        if (SCROLL_DOM.scrollTop + SCROLL_DOM.clientHeight >= SCROLL_DOM.scrollHeight) {
          console.log('加载更多')
          // 将滚动行为告诉组件
          binding.value()
        }
      })
    }
  })
}