bwadmin/FileCollect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home1022

Browse Source
This commit is contained in:
bwstudio
2025-10-22 08:19:00 +08:00
parent 467b04e5b0
commit 97fbfe08d7
6040 changed files with 529099 additions and 9685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/componentsC/avatar/avatar.nvue
+182
View File
@@ -0,0 +1,182 @@
<template>
<view class="u-page">
<view class="u-demo-block">
<text class="u-demo-block__title">基础演示</text>
<view class="u-demo-block__content">
<u-avatar :src="src1"></u-avatar>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">头像形状</text>
<view class="u-demo-block__content">
<view class="u-avatar-item">
<u-avatar
:src="src2"
shape="circle"
@click="click"
></u-avatar>
</view>
<view class="u-avatar-item">
<u-avatar
:src="src3"
shape="square"
></u-avatar>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">头像尺寸</text>
<view class="u-demo-block__content">
<view class="u-avatar-item">
<u-avatar
:src="src4"
size="30"
></u-avatar>
</view>
<view class="u-avatar-item">
<u-avatar
:src="src5"
size="40"
></u-avatar>
</view>
<view class="u-avatar-item">
<u-avatar
:src="src6"
size="50"
></u-avatar>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">图标头像</text>
<view class="u-demo-block__content">
<view class="u-avatar-item">
<u-avatar
icon="red-packet-fill"
fontSize="22"
></u-avatar>
</view>
<view class="u-avatar-item">
<u-avatar
icon="star-fill"
fontSize="22"
></u-avatar>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">文字头像(自动背景色)</text>
<view class="u-demo-block__content">
<view class="u-avatar-item">
<u-avatar
text="U"
fontSize="20"
randomBgColor
:colorIndex="0"
></u-avatar>
</view>
<view class="u-avatar-item">
<u-avatar
text="邓"
fontSize="18"
randomBgColor
></u-avatar>
</view>
<view class="u-avatar-item">
<u-avatar
text="张"
fontSize="18"
randomBgColor
></u-avatar>
</view>
<view class="u-avatar-item">
<u-avatar
text="王"
fontSize="18"
randomBgColor
></u-avatar>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">图片加载失败(显示默认头像)</text>
<view class="u-demo-block__content">
<u-avatar :src="src7"></u-avatar>
</view>
</view>
<!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU -->
<view class="u-demo-block">
<text class="u-demo-block__title">小程序开放能力</text>
<view class="u-demo-block__content">
<view class="u-avatar-item">
<u-avatar
mpAvatar
size="60"
></u-avatar>
</view>
</view>
</view>
<!-- #endif -->
<view class="u-demo-block">
<text class="u-demo-block__title">头像组</text>
<view class="u-demo-block__content">
<u-avatar-group
:urls="urls"
size="35"
gap="0.4"
></u-avatar-group>
</view>
<view class="u-demo-block__content" style="margin-top: 20px">
<u-avatar-group
:urls="urls"
size="35"
gap="0.6"
></u-avatar-group>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
src1: 'https://cdn.uviewui.com/uview/album/1.jpg',
src2: 'https://cdn.uviewui.com/uview/album/2.jpg',
src3: 'https://cdn.uviewui.com/uview/album/3.jpg',
src4: 'https://cdn.uviewui.com/uview/album/4.jpg',
src5: 'https://cdn.uviewui.com/uview/album/5.jpg',
src6: 'https://cdn.uviewui.com/uview/album/6.jpg',
src7: 'https://cdn.uviewui.com/uview/album/noExist.jpg',
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/2.jpg',
'https://cdn.uviewui.com/uview/album/3.jpg',
'https://cdn.uviewui.com/uview/album/4.jpg',
'https://cdn.uviewui.com/uview/album/7.jpg',
'https://cdn.uviewui.com/uview/album/6.jpg',
'https://cdn.uviewui.com/uview/album/5.jpg'
]
}
},
onLoad() {
},
methods: {
click(name) {
console.log('click', name);
}
},
}
</script>
<style lang="scss">
.u-demo-block__content {
@include flex;
align-items: center;
}
.u-avatar-item {
margin-right: 30px;
}
</style>