uni-app封装组件时使用数组

最新推荐文章于 2024-03-01 13:20:17 发布

聿琴惜荭顏丶

最新推荐文章于 2024-03-01 13:20:17 发布

阅读量682

点赞数

分类专栏：前端文章标签： vue 小程序

本文链接：https://blog.csdn.net/QinYHJ/article/details/115418165

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这是一个关于Vue.js组件的示例，用于根据数组长度动态渲染行数。组件使用了UviewUI库，每个行包含四列数据，如姓名和值。在mounted阶段初始化数据，并提供了点击事件监听。适用于前端界面布局和数据展示。

摘要由CSDN通过智能技术生成

功能为基于数组的数目去渲染对应的行数（3条数据对应3行），其中界面布局使用Uview UI
具体代码如下：

<template>
	<view>
		<view class="contian">
			<view v-for="item in listArr">
				<u-row :justify="justify" class="row" :id="item.id" @click="rowClick(item.id)">
					<u-col :span="span" :offset="offset" class="column">
						<view class="txt">{{item.labelLfetTxt}}</view>
					</u-col>
					<u-col :span="span" :offset="offset" class="column">
						<view class="txt">{{item.labelLeftValue}}</view>
					</u-col>
					<u-col :span="span" :offset="offset" class="column">
						<view class="txt">{{item.labelRightTxt}} </view>
					</u-col>
					<u-col :span="span" :offset="offset" class="column">
						<view class="txt">{{item.labelRightValue}}</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "messageCard",
		props: {
			listData: {
				type: Array,
				default: () => [{
					id: '1',
					labelLfetTxt: '姓名',
					labelLeftValue: 'wmj',
					labelRightTxt: '姓名1',
					labelRightValue: 'wmj1'
				}]
			},
			span: {
				type: Number,
				default: 3
			},
			offset: {
				type: Number,
				default: 0
			},
			justify: {
				type: String,
				default: 'between'
			}
		},
		data() {
			return {
				listArr: []
			};
		},
		mounted() {
			var _this = this;
			_this.listArr = _this.listData

		},
		methods: {
			rowClick(e) {
				this.$emit('clickRow', e);
			}
		}

	}
</script>

<style>
	.contian {
		margin: 10rpx;
		border-radius: 8rpx;
		border: 1rpx solid #b3b3b3;
	}

	.txt {
		margin-left: 10rpx;
		/* display: flex;
		flex-direction: row; */
		/* justify-content: center;	 */
	}

	.row {
		height: auto;
		margin: 20rpx 0rpx;
	}

	.column {
		width: 200rpx;
		word-break: break-all
	}
</style>