1. Avatar頭像

1.1. 用圖標、圖片或者字符的形式展示用戶或事物信息。

1.2. Attributes

參數	說明	類型	可選值	默認值
icon	設置頭像的圖標類型, 參考Icon組件	string	無	無
size	設置頭像的大小	number/string	number / large / medium / small	large
shape	設置頭像的形狀	string	circle / square	circle
src	圖片頭像的資源地址	string	無	無
srcSet	以逗號分隔的一個或多個字符串列表表明一系列用戶代理使用的可能的圖像	string	無	無
alt	描述圖像的替換文本	string	無	無
fit	當展示類型為圖片的時候, 設置圖片如何適應容器框	string	fill / contain / cover / none / scale-down	cover

1.3. Events

事件名	說明	回調參數
error	圖片類頭像加載失敗的回調, 返回false會關閉組件默認的fallback行為	(e: Event)

1.4. Slots

name	說明
default	自定義頭像展示內容

2. Avatar頭像例子

2.1. 使用腳手架新建一個名為element-ui-avatar折疊面板的前端項目, 同時安裝Element插件。

2.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Avatar from '../components/Avatar.vue' import TypeAvatar from '../components/TypeAvatar.vue' import ImgAvatar from '../components/ImgAvatar.vue' import FitAvatar from '../components/FitAvatar.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Avatar' },{ path: '/Avatar', component: Avatar },{ path: '/TypeAvatar', component: TypeAvatar },{ path: '/ImgAvatar', component: ImgAvatar },{ path: '/FitAvatar', component: FitAvatar } ]const router = new VueRouter({routes })export default router

2.3. 在components下創建Avatar.vue

<template><div><h1>基本用法</h1><h4>通過shape和size設置頭像的形狀和大小。</h4><el-row><el-col :span="6"><div class="sub-title">circle</div><div class="demo-basic--circle"><div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div><div class="block" v-for="size in sizeList" :key="size"><el-avatar :size="size" :src="circleUrl"></el-avatar></div></div></el-col><el-col :span="6"><div class="sub-title">square</div><div class="demo-basic--circle"><div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div><div class="block" v-for="size in sizeList" :key="size"><el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar></div></div></el-col></el-row></div> </template><script> export default {data () {return {circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',sizeList: ['large', 'medium', 'small']}} } </script><style scoped> /deep/.sub-title {width: 100%;text-align: center; } /deep/.block {display: inline-flex;width: 25%;height: 100px;justify-content: center;vertical-align: middle;align-items: center; } </style>

2.4. 在components下創建TypeAvatar.vue

<template><div><h1>展示類型</h1><h4>支持三種類型: 圖標、圖片和字符。</h4><el-avatar icon="el-icon-user-solid"></el-avatar><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar><el-avatar> user </el-avatar></div> </template>

2.5. 在components下創建ImgAvatar.vue

<template><div><h1>圖片加載失敗的fallback行為</h1><h4>當展示類型為圖片的時候, 圖片加載失敗的fallback行為。</h4><el-avatar :size="60" src="https://empty" @error="errorHandler"><img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/></el-avatar></div> </template><script> export default {methods: {errorHandler () {return true}} } </script>

2.6. 在components下創建FitAvatar.vue

<template><div><h1>圖片如何適應容器框</h1><h4>當展示類型為圖片的時候, 使用fit屬性定義圖片如何適應容器框, 同原生object-fit。</h4><div class="block" v-for="fit in fits" :key="fit"><span class="title">{{ fit }}</span><el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar></div></div> </template><script> export default {data () {return {fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'}} } </script><style scoped> /deep/.block {display: inline-block;width: 200px;text-align: center; } /deep/.title {display: block;height: 30px;line-height: 30px; } </style>

2.7. 運行項目, 訪問http://localhost:8080/#/Avatar

2.8. 運行項目, 訪問http://localhost:8080/#/TypeAvatar

2.9. 運行項目, 訪問http://localhost:8080/#/ImgAvatar

2.10. 運行項目, 訪問http://localhost:8080/#/FitAvatar

總結

以上是生活随笔為你收集整理的056_Avatar头像的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。