emis-app/components/tpx-text-item/tpx-text-item.vue

<template>
	<u-row justify="between">
		<view>
			<template v-if="!$slots.left">
				<u-text :text="label" size="28" :bold="true"></u-text>
			</template>
			<slot name="left"></slot>
		</view>
		<u-row :custom-style="`min-width: ${rightWidth}rpx;`" justify="end" align="center">
			<template v-if="!$slots.right">
				<u-text align="right" margin="0 12rpx 0 0" size="26"
					:text="title"></u-text>
				<u-icon v-if="list" size="26" name="arrow-right" color="#333"></u-icon>
			</template>
			<slot name="right"></slot>
		</u-row>
	</u-row>
</template>

<script>
	export default {
		computed: {
			title() {
				let title = this.value
				let val = this.value
				!val && this.list && (title = '请选择');
				if(val && this.list) {
					if(!Array.isArray() && val.split) {
						val = val.split(",")
					}
					title = this.list.filter(t=> t.val == val || (val.indexOf && val.indexOf(t.val) > -1)).map(t=> t.title).join(",")
				}
				return title
			}
		},
		props: {
			rightWidth:{
				default() {
					return 400
				}
			},
			label: {
				default () {
					return ''
				}
			},
			value: {
			},
			list: {
			},
		},
		data() {
			return {

			}
		},
		created() {

		},
		onHide() {

		},
		unmounted() {},
		
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	
</style>