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;">
				<tpx-text-dic :value="value" :list="list" :checkedList="checkedList" :text="text" :placeholder="placeholder"></tpx-text-dic>
			</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: {
			contClass() {
				let pre = ['radius-10']
				// if (this.isWhite) {
				// 	pre.push('c-white')
				// } 
				if (true) {
					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
				}
			},
			list: {
				default () {
					return []
				}
			},
			checkedList: {
			},
			value: {
				default () {
					return ""
				}
			},
			text: {
				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: 2rpx solid #dadbde;
}
.c-grey{
	background-color: #F6F6F6;
	border: 2rpx solid #dadbde;
}
</style>