element-ui element-plus avatar

源代码地址

version:element-plus 1.0.1-beta.0

<template><span :class="avatarClass" :style="sizeStyle"><!-- 先判断是否有 src 地址，有再判断是否加载成功 --><imgv-if="(src || srcSet) && !hasLoadError":src="src":alt="alt":srcset="srcSet":style="fitStyle"@error="handleError"><!-- 再判断是否传入 icon --><i v-else-if="icon" :class="icon"></i><!-- 最后才是默认插槽 也就是说不传 src 和 icon ，插槽才有用 --><slot v-else></slot></span>
</template>

<script lang="ts">
import { defineComponent, computed, ref, PropType } from 'vue'const ERROR_EVENT = 'error'
export default defineComponent({name: 'ElAvatar',props: {size: {type: [Number, String] as PropType<number | string>, // 接受 number 和 stringvalidator(this: never, val: unknown) {if (typeof val === 'string') {return ['large', 'medium', 'small'].includes(val) // 字符串判断是不是三种类型中的}return typeof val === 'number'},default: 'large',},shape: {type: String,default: 'circle',validator(this: never, val: string) {return ['circle', 'square'].includes(val) // 只支持 圆 和 方},},icon: String, // icon 组件的类名src: String,alt: String,srcSet: String,fit: {type: String,default: 'cover',},},emits: [ERROR_EVENT],setup(props, { emit }) {const hasLoadError = ref(false)// 父标签 span 的 classconst avatarClass = computed(() => {const { size, icon, shape } = propslet classList = ['el-avatar'] // 默认classif (size && typeof size === 'string') {classList.push(`el-avatar--${size}`) // size 是 字符串 class 就将对应的 size 放进去}if (icon) {classList.push('el-avatar--icon') // icon 的 对应类名}if (shape) {classList.push(`el-avatar--${shape}`) // 根据 shape 传入对应的 class}return classList})// 父标签 span 的 行内样式const sizeStyle = computed(() => {const { size } = props// 如果 size 是 number 就 返回 正方形垂直居中的样式return typeof size === 'number' ? {height: `${size}px`,width: `${size}px`,lineHeight: `${size}px`,} : {}})// img 标签的行内样式 objectFit 根据传入的 fit 来实现const fitStyle = computed(() => ({objectFit: props.fit,}))// 图片加载错误的触发函数 => 将 hasLoadError 置位 false ，并触发回调function handleError(e: Event) {hasLoadError.value = trueemit(ERROR_EVENT, e) // error 回调}return {hasLoadError, avatarClass, sizeStyle, handleError,fitStyle,}},
})
</script>

element-ui element-plus avatar - 分析相关推荐

Element UI Element Plus之改变表格单元格颜色
首先官网文档中有 Table 表格组件的属性说明,只需要在el-table标签中加上:cell-style="xxx",以及实现该方法即可.Element UI框架和Elemen ...
Element UI三十一Avatar头像
简介 el-avatar:该组件用于设置图标.图片或文字来展示用户或事物信息.其属性表入下, 其子组件的slot属性取值: 基础用法通过shape和size属性可设置头像的形状和大小: <el ...
Vue + Bootstrap|Element UI——模态框被遮罩层遮盖问题解决方案
问题描述问题分析 1)若dialog弹出框,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级) Element UI中设置了modal-append-to-body='tru ...
element走马灯自动_vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
element走马灯自动_[转]vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
使用element ui实现上传图片
项目场景: 例如:上传多张,单张图片问题描述 element ui 上传图片简单原因分析: 自己使用自己写的方法,耗费时间长,并且功能有错解决方案: el-upload(:action=&quo ...
网站快速成型工具-Element UI
Element UI Element UI 1 什么是Element UI???? 2 搭建环境 2.1 创建vue项目 2.2 安装 element-ui组件 2.3 Element UI 引入 3 ...
element UI的带输入建议el-autocomplete总结（详细，全）
Table of Contents 引用el-autocomplete 触发带输入建议的两种方式转成输入建议回调的数据结构增加回车触发事件解决回车后建议输入框没消失的bug vue+elemen ...
vue组件库介绍以及组件库Element UI 的使用
组件库前言这篇文章介绍vue组件库! 介绍什么是组件库以及Element UI组件库的使用! 看完不会你打我.哈哈哈,开玩笑的,不多说,上刺刀!! 1. 什么是 vue 组件库在实际开发中,前端 ...
Vue UI组件库(Element UI库)
1 移动端常用 UI 组件库 1. Vant Vant 4 - 轻量.可定制的移动端组件库 (vant-ui.github.io) 2. Cube UI cube-ui Document (didi ...

element-ui element-plus avatar - 分析

element-ui element-plus avatar - 分析相关推荐

最新文章

热门文章