food_wechat/components/cell/cell.vue

<template>
	<view class="flex msb m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow" @click="handleClick">
		<view class="flex mac l-h-18">
			<view class="fz28 l-h-18">{{cellTit}}</view>
			<view v-if="required===true" class="bg-m rad-c l-h-18 m-l-24 reqBox"></view>
		</view>
		<view class="fcb fz28 flex mac">
			<view class="fz28" :class="conClass">{{cellCon}}</view>
			<u-icon name="arrow-right" size="28rpx" v-if='isRightIcon'></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cell",
		data() {
			return {

			}
		},
		props: {
			//cell主标题
			cellTit: {
				type: String
			},
			//cell简单显示内容
			cellCon: {
				type: String
			},
			//cell内容标签的class
			conClass: {
				type: String
			},
			//是否显示 必填红点 默认不显示
			required: {
				type: Boolean,
				default: false
			},
			//是否显示 向右的箭头
			isRightIcon: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			handleClick() {
				// 触发点击事件，向父组件发送事件
				this.$emit('click');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reqBox {
		width: 16rpx;
		height: 16rpx;
	}
</style>