Browse Source

头像组参数调整

ming 3 years ago
parent
commit
93c0648280

+ 14 - 5
components/fs-avatar-group/fs-avatar-group.vue

@@ -5,13 +5,22 @@
 </template>
 
 <script setup>
-import { provide } from 'vue'
+import { provide, computed } from 'vue'
 
 const props = defineProps({
 	margin: {
-		type: String,
-		default: '-30rpx'
-	}
+		type: Number,
+		default: '-30'
+	},
+	border: Boolean,
 })
-provide('marginLeft', props.margin)
+
+const paddingLeft = computed(() => -props.margin + 'rpx')
+provide('avatarGroup', props)
 </script>
+
+<style lang="scss" scoped>
+.fs-avatar-group{
+	padding-left: v-bind(paddingLeft);
+}
+</style>

+ 15 - 4
components/fs-avatar/fs-avatar.vue

@@ -14,11 +14,11 @@
 			right: fixed ? right : 0,
 			bottom: fixed ? bottom : 0,
 			border: borderStyle,
-			'margin-left': marginLeft
+			'margin-left': avatarGroup.margin + 'rpx'
 		}"
 		@click="handleClick"
 	>
-		<image class="fs-avatar-img" :src="src" v-if="src" :lazy-load="lazyLoad" :mode="imageMode" />
+		<image class="fs-avatar-img" :src="src" v-if="src" :lazy-load="lazyLoad" :mode="imageMode" @click="handlePreview" />
 		<view v-else class="fs-avatar-slot" :class="['bg-' + bgColorType]" :style="{backgroundColor:bgColor}">
 			<slot></slot>
 		</view>
@@ -65,6 +65,7 @@ const props = defineProps({
 		type: String,
 		default: 'scaleToFill'
 	},
+	preview: Boolean,
 	radius: Boolean,
 	link: String,
 	linkType: {
@@ -84,9 +85,11 @@ const props = defineProps({
 
 const emits = defineEmits(['click'])
 
-const marginLeft = inject('marginLeft', 0)
+const avatarGroup = inject('avatarGroup', {})
 
-const borderStyle = computed(() => props.border ? `${ props.borderWidth} solid ${ props.borderColor}` : 'none')
+const borderStyle = computed(() => {
+	return (props.border || avatarGroup.border) ? `${ props.borderWidth} solid ${ props.borderColor}` : 'none'
+})
 
 const handleClick = () => {
 	if (props.link) {
@@ -95,6 +98,14 @@ const handleClick = () => {
 		})
 	}
 	emits('click')
+}
+
+const handlePreview = () => {
+	if (props.preview) {
+		uni.previewImage({
+			urls: [props.src]
+		})
+	}
 }
 </script>
 

+ 5 - 1
components/fs-empty/fs-empty.vue

@@ -16,6 +16,10 @@ const props = defineProps({
 	text: {
 		type: String,
 		default: '暂无数据'
+	},
+	padding: {
+		type: String,
+		default: '200rpx 30rpx'
 	}
 })
 </script>
@@ -23,7 +27,7 @@ const props = defineProps({
 <style lang="scss" scoped>
 .fs-empty-box{
 	text-align: center;
-	padding: 200rpx 30rpx;
+	padding: var(padding);
 	
 	.content{
 		margin-top: 20rpx;