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

本文介绍如何在Vue后台管理系统中利用自定义指令实现用户头像的默认展示逻辑。当用户未设置头像时,显示默认头像;已设置则显示用户头像。通过监听img标签的error事件,确保在图片加载失败时能切换到默认头像。该功能以自定义指令的方式复用,提高代码的可维护性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

整理原因:

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

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

自定义指令的注册与使用

// 配置设置头像的自定义指令  相当于指令的第二个参数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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值