自定义cell控件

Posted 2023-02-19 黑胡子大叔的小屋

自定义cell控件

<template>
	<!-- 行元素组件 -->
	<view class="content">
		<view class="cell-item" :style="border ? 'border-bottom:2rpx solid #DBE2EC' : ''">
			<view class="cell-item-main">
				<slot name="icon"></slot>
				<view class="cell-item-icon" v-if="icon != ''">
					<image :src="icon" class="cell-item-icon-content" mode="scaleToFill"></image>
				</view>
				<view class="cell-item-content">
					<p class="cell-item-title">title</p>
					<view class="cell-item-desc" v-if="label != '' || status != ''">
						<view class="cell-item-label">
							label
						</view>
						<template v-if="status != ''">
							<view class="cell-item-line mr15 ml15"></view>
							<view class="cell-item-status">
								status
							</view>
						</template>
					</view>
				</view>
			</view>
			<view class="cell-item-arrow">
				<image src="@/static/common/ic-common-arrow-right.png" class="cell-item-arrow-content" mode="scaleToFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default 
		props:
			icon:
				type:String,
				default:''
			,
			title:
				type:String,
				default:'title'
			,
			label:
				type:String,
				default:'label'
			,
			status:
				type:String,
				default:'status'
			,
			border:
				type:Boolean,
				default:false
			
		,
		data() 
			return 
				
			
		,
		methods:
			gotoLoadMore()
				console.log('跳转加载更多',this.loadMore)
			
		
	
</script>

<style scoped lang="scss">
	.content
		padding: 0 20rpx;
		.cell-item
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			.cell-item-main
				flex: 1;
				min-height: 100rpx;
				display: flex;
				align-items: center;
				.cell-item-icon
					width: 180rpx;
					height: 180rpx;
					.cell-item-icon-content
						width: 100%;
						height: 100%;
					
				
				.cell-item-content
					flex: 1;
					.cell-item-title
						padding: 15rpx 0;
						font-size: 33rpx;
						font-weight: 600;
						height: 50rpx;
					
					.cell-item-desc
						display: flex;
						align-items: center;
						color: #777777;
						height: 40rpx;
						.cell-item-label
						
						.cell-item-line
							width: 5rpx;
							height: 30rpx;
							background: #DBE2EC;
						
						.cell-item-status
						
					
				
			
			.cell-item-arrow
				width: 40rpx;
				height: 40rpx;
				.cell-item-arrow-content
					width: 100%;
					height: 100%;
				
			
		
		.cell-item-bottom-border
			border-top: 2rpx solid #DBE2EC;
		
	
	
</style>