自定义指令的使用场景

1.处理失败图片

如果图片加载失败：就显示默认图片，加载成功就不用管

（1）导入默认图片

import defaultImg from '@/assets/common/head.jpg'

export default {
  data() {
    return {
      defaultImg: defaultImg
    }
  },
}

（2）在img中动态设置src属性

<img v-errorImg="defaultImg" :src="avatar" class="user-avatar">

avatar是从vuex中拿到的线上图片

（3）在全局注册自定义指令

// Vue.directive('自定义指令的名字',{})
Vue.directive("errorImg", {
  inserted(el, binding) {
    el.onerror = function () {
      //元素加载执行的时候出现错误就会触发这个事件，事件触发：表示资源加载失败
      el.src = binding.value;
    };
  },
});

2.根据权限控制按钮的显示与隐藏

通过传过来的showBtn，然后再points数组中查找，如果有就表示按钮有权限，没有就不显示按钮，没有权限

（1）设置自定义指令

 <el-button v-arrow="'showBtn1'" @click="handleDownload">导出</el-button>

（2）在全局注册自定义指令

Vue.directive('arrow', {
  inserted(el, binding) {
    console.log(el, 1223)
    // 找到vuex中存储的所有权限点
    var points = store.state.user.userInfo.roles.points
    // 判断所有权限点中是否包含自定义指令传过来的标识符
    var flag = points.includes(binding.value)
    // 如果有就显示不做处理，如果没有就通过父节点移除自己
    if (!flag) {
      el.parentNode.removeChild(el)
    }
  }
})