You've already forked template-MP
Initial commit
This commit is contained in:
yuantao
23
uview-plus/components/u-avatar-group/avatarGroup.js
Normal file
23
uview-plus/components/u-avatar-group/avatarGroup.js
Normal file
@@ -0,0 +1,23 @@
|
||||
/*
|
||||
* @Author : LQ
|
||||
* @Description :
|
||||
* @version : 1.0
|
||||
* @Date : 2021-08-20 16:44:21
|
||||
* @LastAuthor : LQ
|
||||
* @lastTime : 2021-08-20 16:49:55
|
||||
* @FilePath : /u-view2.0/uview-ui/libs/config/props/avatarGroup.js
|
||||
*/
|
||||
export default {
|
||||
// avatarGroup 组件
|
||||
avatarGroup: {
|
||||
urls: [],
|
||||
maxCount: 5,
|
||||
shape: 'circle',
|
||||
mode: 'scaleToFill',
|
||||
showMore: true,
|
||||
size: 40,
|
||||
keyName: '',
|
||||
gap: 0.5,
|
||||
extraValue: 0
|
||||
}
|
||||
}
|
||||
54
uview-plus/components/u-avatar-group/props.js
Normal file
54
uview-plus/components/u-avatar-group/props.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import { defineMixin } from '../../libs/vue'
|
||||
import defProps from '../../libs/config/props.js'
|
||||
export const props = defineMixin({
|
||||
props: {
|
||||
// 头像图片组
|
||||
urls: {
|
||||
type: Array,
|
||||
default: () => defProps.avatarGroup.urls
|
||||
},
|
||||
// 最多展示的头像数量
|
||||
maxCount: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.avatarGroup.maxCount
|
||||
},
|
||||
// 头像形状
|
||||
shape: {
|
||||
type: String,
|
||||
default: () => defProps.avatarGroup.shape
|
||||
},
|
||||
// 图片裁剪模式
|
||||
mode: {
|
||||
type: String,
|
||||
default: () => defProps.avatarGroup.mode
|
||||
},
|
||||
// 超出maxCount时是否显示查看更多的提示
|
||||
showMore: {
|
||||
type: Boolean,
|
||||
default: () => defProps.avatarGroup.showMore
|
||||
},
|
||||
// 头像大小
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.avatarGroup.size
|
||||
},
|
||||
// 指定从数组的对象元素中读取哪个属性作为图片地址
|
||||
keyName: {
|
||||
type: String,
|
||||
default: () => defProps.avatarGroup.keyName
|
||||
},
|
||||
// 头像之间的遮挡比例
|
||||
gap: {
|
||||
type: [String, Number],
|
||||
validator(value) {
|
||||
return value >= 0 && value <= 1
|
||||
},
|
||||
default: () => defProps.avatarGroup.gap
|
||||
},
|
||||
// 需额外显示的值
|
||||
extraValue: {
|
||||
type: [Number, String],
|
||||
default: () => defProps.avatarGroup.extraValue
|
||||
}
|
||||
}
|
||||
})
|
||||
110
uview-plus/components/u-avatar-group/u-avatar-group.vue
Normal file
110
uview-plus/components/u-avatar-group/u-avatar-group.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view class="u-avatar-group">
|
||||
<view
|
||||
class="u-avatar-group__item"
|
||||
v-for="(item, index) in showUrl"
|
||||
:key="index"
|
||||
:style="{
|
||||
marginLeft: index === 0 ? 0 : addUnit(-size * gap)
|
||||
}"
|
||||
>
|
||||
<u-avatar
|
||||
:size="size"
|
||||
:shape="shape"
|
||||
:mode="mode"
|
||||
:src="testObject(item) ? keyName && item[keyName] || item.url : item"
|
||||
></u-avatar>
|
||||
<view
|
||||
class="u-avatar-group__item__show-more"
|
||||
v-if="showMore && index === showUrl.length - 1 && (urls.length > maxCount || extraValue > 0)"
|
||||
@tap="clickHandler"
|
||||
>
|
||||
<up-text
|
||||
color="#ffffff"
|
||||
:size="size * 0.4"
|
||||
:text="`+${extraValue || urls.length - showUrl.length}`"
|
||||
align="center"
|
||||
customStyle="justify-content: center"
|
||||
></up-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { props } from './props';
|
||||
import { mpMixin } from '../../libs/mixin/mpMixin';
|
||||
import { mixin } from '../../libs/mixin/mixin';
|
||||
import { addUnit } from '../../libs/function/index';
|
||||
import test from '../../libs/function/test';
|
||||
/**
|
||||
* AvatarGroup 头像组
|
||||
* @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
|
||||
* @tutorial https://ijry.github.io/uview-plus/components/avatar.html
|
||||
*
|
||||
* @property {Array} urls 头像图片组 （默认 [] ）
|
||||
* @property {String | Number} maxCount 最多展示的头像数量 （ 默认 5 ）
|
||||
* @property {String} shape 头像形状（ 'circle' (默认) | 'square' ）
|
||||
* @property {String} mode 图片裁剪模式（默认 'scaleToFill' ）
|
||||
* @property {Boolean} showMore 超出maxCount时是否显示查看更多的提示 （默认 true ）
|
||||
* @property {String | Number} size 头像大小 （默认 40 ）
|
||||
* @property {String} keyName 指定从数组的对象元素中读取哪个属性作为图片地址
|
||||
* @property {String | Number} gap 头像之间的遮挡比例（0.4代表遮挡40%） （默认 0.5 ）
|
||||
* @property {String | Number} extraValue 需额外显示的值
|
||||
* @event {Function} showMore 头像组更多点击
|
||||
* @example <u-avatar-group:urls="urls" size="35" gap="0.4" ></u-avatar-group:urls=>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-avatar-group',
|
||||
mixins: [mpMixin, mixin, props],
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showUrl() {
|
||||
return this.urls.slice(0, this.maxCount)
|
||||
}
|
||||
},
|
||||
emits: ["showMore"],
|
||||
methods: {
|
||||
addUnit,
|
||||
testObject: test.object,
|
||||
clickHandler() {
|
||||
this.$emit('showMore')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
|
||||
.u-avatar-group {
|
||||
@include flex;
|
||||
|
||||
&__item {
|
||||
margin-left: -10px;
|
||||
position: relative;
|
||||
|
||||
&--no-indent {
|
||||
// 如果你想质疑作者不会使用:first-child，说明你太年轻，因为nvue不支持
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&__show-more {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user