emis-app/components/tpx-select/default-select-input.vue

<template>
	<view :class="contClass" :style="styles">
		<u-row custom-style="width: 100%;">
			<view style="flex: 1;">
				<u-text :text="leftText" size="28" :lines="1"></u-text>
			</view>
			<u-row>
				<u-icon size="22" :name="`${show?'arrow-up':'arrow-down'}`" color="#333"></u-icon>
			</u-row>
		</u-row>
	</view>
</template>

<script>
	export default {
		computed: {
			leftText() {
				let str = ''
				if (this.value) {
					const curItem = this.list.filter(item => item.val == this.value)[0] || {}
					curItem.title && (str = curItem.title)
				}
				if(!str && Array.isArray(this.checkedList)) {
					str = this.checkedList.map(t=> t.title).join(',')
				}
				if(!str) {
					str = this.placeholder
				}
				return str
			},
			contClass() {
				let pre = ['radius-10']
				if (this.isWhite) {
					pre.push('c-white')
				} else {
					pre.push('c-grey')
				}
				return pre.join(" ")
			},
			styles() {
				return `margin-top: 0;height: 62rpx;${this.customStyle}`
			}
		},
		props: {
			customStyle: {
				default () {
					return ''
				}
			},
			isWhite: {
				default () {
					return false
				}
			},
			placeholder: {
				default () {
					return ''
				}
			},
			show: {
				default () {
					return false
				}
			},
			value: {
				default () {
					return ''
				}
			},
			list: {
				default () {
					return []
				}
			},
			checkedList: {
				default () {
					return []
				}
			},
		},
		data() {
			return {

			}
		},
		created() {

		},
		onHide() {

		},
		unmounted() {},

		methods: {}
	}
</script>

<style scoped lang="scss">
.c-white,.c-grey{
	display: flex;
	padding-left: 20rpx;
	padding-right: 20rpx;
	border-radius: 10rpx;
	align-items: center;
}
.c-white{
	background-color: #fff;
	border: 1rpx solid #dadbde;
}
.c-grey{
	background-color: #F6F6F6;
	border: 1rpx solid #dadbde;
}
</style>