頭像 · colorUI文檔

頭像形狀尺寸 ![](https://img.kancloud.cn/cd/d3/cdd3f3e7d0ad39101ed9cdb7590d6db8_417x515.png) ``` <view class="cu-bar bg-white"> <view class="action"> <text class="cuIcon-title text-blue"></text>頭像形狀 </view> </view> <view class="padding"> <view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)"></view> <view class="cu-avatar radius margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view> </view> <view class="cu-bar bg-white margin-top"> <view class="action"> <text class="cuIcon-title text-blue"></text>頭像尺寸 </view> </view> <view class="padding"> <view class="cu-avatar sm round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)"></view> <view class="cu-avatar round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view> <view class="cu-avatar lg round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view> <view class="cu-avatar xl round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"></view> </view> <view class="padding"> <view class="cu-avatar sm round margin-left bg-red"> A</view> <view class="cu-avatar round margin-left bg-red">B</view> <view class="cu-avatar lg round margin-left bg-red">C</view> <view class="cu-avatar xl round margin-left bg-red">D</view> </view> <view class="padding"> <view class="cu-avatar sm round margin-left bg-red"> 蔚</view> <view class="cu-avatar round margin-left bg-red">藍</view> <view class="cu-avatar lg round margin-left bg-red"> <text>wl</text> </view> <view class="cu-avatar xl round margin-left bg-red"> <text class="avatar-text">網絡</text> </view> </view> ``` 內嵌文字頭像顏色 ![](https://img.kancloud.cn/6f/c4/6fc4597999add1499f6861f84175fe33_419x425.png) ``` <view class="cu-bar bg-white margin-top"> <view class="action"> <text class="cuIcon-title text-blue"></text>內嵌文字(圖標) </view> </view> <view class="padding"> <view class="cu-avatar radius"> <text class="cuIcon-people"></text> </view> <view class="cu-avatar radius margin-left"> <text>港</text> </view> </view> <view class="cu-bar bg-white margin-top"> <view class="action"> <text class="cuIcon-title text-blue"></text>頭像顏色 </view> </view> <view class="padding-sm"> <view class="cu-avatar round lg margin-xs bg-red"> <text class="avatar-text">red</text> </view> <view class="cu-avatar round lg margin-xs bg-red"> <text class="avatar-text">orange</text> </view> <view class="cu-avatar round lg margin-xs bg-red"> <text class="avatar-text">yellow</text> </view> <view class="cu-avatar round lg margin-xs bg-red"> <text class="avatar-text">olive</text> </view> <view class="cu-avatar round lg margin-xs bg-red"> <text class="avatar-text">green</text> </view> <view class="cu-avatar round lg margin-xs bg-red"> <text class="avatar-text">blue</text> </view> <view class="cu-avatar round lg margin-xs bg-red"> <text class="avatar-text">purple</text> </view> <view class="cu-avatar round lg margin-xs bg-red"> <text class="avatar-text">mauve</text> </view> <view class="cu-avatar round lg margin-xs bg-red"> <text class="avatar-text">pink</text> </view> <view class="cu-avatar round lg margin-xs bg-red"> <text class="avatar-text">brown</text> </view> <view class="cu-avatar round lg margin-xs bg-red"> <text class="avatar-text">grey</text> </view> <view class="cu-avatar round lg margin-xs bg-red"> <text class="avatar-text">gray</text> </view> <view class="cu-avatar round lg margin-xs bg-red"> <text class="avatar-text">black</text> </view> <view class="cu-avatar round lg margin-xs bg-red"> <text class="avatar-text">white</text> </view> </view> ``` 頭像組頭像標簽 ![](https://img.kancloud.cn/cf/9a/cf9af8ca529658dc1ea61356f817c07d_414x302.png) HTML代碼 ``` <view class="cu-bar bg-white margin-top"> <view class="action"> <text class="cuIcon-title text-blue"></text>頭像組 </view> </view> <view class="padding"> <view class="cu-avatar-group"> <view class="cu-avatar round lg" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view> </view> </view> <view class="cu-bar bg-white margin-top"> <view class="action"> <text class="cuIcon-title text-blue"></text>頭像標簽 </view> </view> <view class="padding"> <view class="cu-avatar round lg margin-left" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"> <view class="cu-tag badge" :class="index%2==0?'cuIcon-female bg-pink':'cuIcon-male bg-blue'"></view> </view> </view> ``` js代碼 ``` <script> export default { data() { return { ColorList: this.ColorList, avatar: [ 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg', 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg', 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg', 'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg' ], }; } } </script> ```