Element ui Avatar头像管理组件实现当用户没有头像时以名称最后一个字为头像

el-avatar是一个比较方便的头像管理组件

src控制他的图片展示

<el-avatarclass = "avatar":src="item.images"
></el-avatar>

样式的话可以用avatar控制

<style>
.avatar{width: 18px;height: 18px;line-height: 18px;
}
.avatar img{border-radius: 50%;width: 18px;height: 18px;border:1px solid #eee;
}
</style>

因为上面我们定义了他的 class 为 avatar 然后我们通过这个类名定义他的样式和他下面图片 img的样式

当然如果只是展示个图片那完全没必要搞这个

他的得色在于当你没有头像时

 <el-avatarclass = "avatar":src="item.images"v-if = "item.images"
></el-avatar>
<el-avatarclass = "avatar"style="background:#21B1FF"v-else
>{{getNameLast(item.initiatorName)}}</el-avatar>

这里我们用v-if 判断如果item.images有值代表是有头像的就直接用src
否则代表item.images没有值这个用户并没有头像

这样就直接传item.initiatorName名字然后这个getNameLast函数参考代码如下

const getNameLast = (str) => {// 如果有括号返回(前一个字if (str.indexOf('(') > -1 || str.indexOf('（') > -1) {const _str = str.split('(') || str.split('（');const newStr = _str[0].substring(_str[0].length - 1);return newStr;} else {return str.substring(str.length - 1)}
}

简单说就是取传进来的值的最后一个字

简单说就是拿不到头像就把名字传进getNameLast 获取到名字的最后一个字用于展示
运行结果是这样的

可以看到没有头像的对应位置就会展示出名字的最后一个字

其实这个组件自己做也比较简单就是判断如果src没传进来展示下面的文本就好了但element ui这有个现成的

Element ui Avatar头像管理组件实现当用户没有头像时以名称最后一个字为头像相关推荐

Element ui+vue前端框架组件主题美化后台管理系统模板html
最新设计了一套Element ui主题模板演示地址:Element ui+vue前端框架组件主题美化后台管理系统模板 Element ui版本号:2.15.12 vue版本号:2.7. ...
从Element ui看开发公共组件的三种方式
在日常的开发工作中,封装自己的公共组件是很常见的需求,但想要组件更加优雅和通用也是一门学问.恰好前段时间用过Element ui,于是想学习这种库是如何封装插件的,这篇文章就是我的一点理解. 从入口文 ...
axure element ui素材_【Axure分享】基于Element UI的Axure Web组件
有一段时间没做过产品原型了,前一阵有一个web产品需要做原型,正好在搞前端,于是顺便把Element UI移植到Axure上,基本上实现了大部分的功能组件,部分过于繁琐的组件未实现. 自己觉得蛮满意的 ...
icworks+D2Admin+vue+element UI 制作后台管理
前言: icworks又名飞冰海量可复用物料,通过 GUI 工具极速构建中后台应用.是阿里巴巴前端团队开源的一个产品,目的让前端开发简单而友好. 进入正题使用以及构建项目非常简单 1.直接进入官网 ...
element ui el-time-picker 时间选择其组件的坑点记录
需求:需要进行一个时间区间的选择遇到的问题:需要设置默认值,只需要拿到小时和分的时间格式. <el-time-pickeris-rangestyle="width:500px&quo ...
Element UI - v-infinite-scroll无限滚动组件
一.v-infinite-scroll无限滚动组件使用详解 1.v-infinite-scroll="load" //load无限滚动加载的方法2.infinite-scroll- ...
element ui前端排序，某列有数据为空值时，排序错乱问题
表格排序列的数据出现空值时,组件自带的排序功能不正常.而后查找了相关解决方法,有一网友给了我启示,解决了问题,现在照着思路写下步骤,日后再次遇到方便查找解决方式是重新定义一个新数组:遍历表格数据da ...
element UI el-upload组件实现视频文件上传视频回显
项目中需要提供一个视频介绍,使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传API并返回URL, 百度找了一番后最终实现了. HTML <el ...
element ui table组件异步加载数据盒子位移
使用element ui 中的 table组件时 ,异步加载数据,然后渲染上去时会出现td与th对不齐,但是重新重新进一次就有又好了,但是对于用户体验肯定是不行的. 这个时候只需要使用element ...

Element ui Avatar头像管理组件实现当用户没有头像时以名称最后一个字为头像

Element ui Avatar头像管理组件实现当用户没有头像时以名称最后一个字为头像相关推荐

最新文章

热门文章

Element ui Avatar头像管理组件 实现当用户没有头像时 以名称最后一个字为头像

Element ui Avatar头像管理组件 实现当用户没有头像时 以名称最后一个字为头像相关推荐

最新文章

热门文章

Element ui Avatar头像管理组件实现当用户没有头像时以名称最后一个字为头像

Element ui Avatar头像管理组件实现当用户没有头像时以名称最后一个字为头像相关推荐