1. Avatar頭像

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

1.2. Attributes

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

1.3. Events

事件名	說明	回調(diào)參數(shù)
error	圖片類頭像加載失敗的回調(diào), 返回false會(huì)關(guān)閉組件默認(rèn)的fallback行為	(e: Event)

1.4. Slots

name	說明
default	自定義頭像展示內(nèi)容

2. Avatar頭像例子

2.1. 使用腳手架新建一個(gè)名為element-ui-avatar折疊面板的前端項(xiàng)目, 同時(shí)安裝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下創(chuàng)建Avatar.vue

<template><div><h1>基本用法</h1><h4>通過shape和size設(shè)置頭像的形狀和大小。</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下創(chuàng)建TypeAvatar.vue

<template><div><h1>展示類型</h1><h4>支持三種類型: 圖標(biāo)、圖片和字符。</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下創(chuàng)建ImgAvatar.vue

<template><div><h1>圖片加載失敗的fallback行為</h1><h4>當(dāng)展示類型為圖片的時(shí)候, 圖片加載失敗的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下創(chuàng)建FitAvatar.vue

<template><div><h1>圖片如何適應(yīng)容器框</h1><h4>當(dāng)展示類型為圖片的時(shí)候, 使用fit屬性定義圖片如何適應(yīng)容器框, 同原生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. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/Avatar

2.8. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/TypeAvatar

2.9. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/ImgAvatar

2.10. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/FitAvatar

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。