1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 自定义指令 实现默认头像和用户上传头像的切换

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

时间:2021-07-31 08:29:52

相关推荐

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

整理原因:

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

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

自定义指令的注册与使用

// 配置设置头像的自定义指令 相当于指令的第二个参数option 第一个参数是指令的名字// 对dom进行底层操作,如果没有照片的时候就显示默认的照片// import store from '@/store'export const Avctar = {// 第二个参数表示自定义指令接受的参数// el 拿到的是当前的dom元素实例// bing 表示绑定指令时接受的参数 bing.valueinserted: function (el, bing) {// 监听dom元素也就是img标签的error事件,当没有照片 // 凡是需要加载网络资源的,如果当前资源加载不出来,就会触发onerror事件 // 满足条件,如果说当前没有照片的话,才进行执行el.onerror = () => (el.src = bing.value)},}

使用方式

在main.js中

import { Avctar } from '@/directive'Vue.directive('avatar', Avctar)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。