当前位置：网站首页>自定义指令，实现默认头像和用户上传头像的切换

自定义指令，实现默认头像和用户上传头像的切换

2022-08-09 14:54:00 【小羊卷】

整理原因：

在后台管理系统中，我们通常需要实现如果当前的用户没有设置头像，那么就显示默认头像，如果设置了头像，那么就使用用户设置的头像

因为这个功能在组件中的各个位置都有用到，所以可以使用自定义指令来实现

自定义指令的注册与使用

// 配置设置头像的自定义指令  相当于指令的第二个参数option  第一个参数是指令的名字
// 对dom进行底层操作，如果没有照片的时候就显示默认的照片
// import store from '@/store'

export const Avctar = {
  // 第二个参数表示自定义指令接受的参数
  // el 拿到的是当前的dom元素实例
  //  bing 表示绑定指令时接受的参数 bing.value
  inserted: function (el, bing) {
  // 监听dom元素也就是img标签的error事件，当没有照片   
  // 凡是需要加载网络资源的，如果当前资源加载不出来，就会触发onerror事件   
    // 满足条件，如果说当前没有照片的话，才进行执行
    el.onerror = () => (el.src = bing.value)
  },
}

使用方式

在main.js中

import { Avctar } from '@/directive'


Vue.directive('avatar', Avctar)

原网站

版权声明
本文为[小羊卷]所创，转载请带上原文链接，感谢
https://blog.csdn.net/LOxia/article/details/126159853

边栏推荐

猜你喜欢

随机推荐