assess-app/components/en-from/en-date/en-date.vue

<template>
	<view class="box p-tb30" :class="{'no-box':noBox}">
		<uni-datetime-picker class="flex" :type="type" :value="inputValue" :start="startDate" :end="endDate"
			:border="border" :placeholder="placeholder" @change="change">
			<view class="input-box">
				<view class="input-box-left" :style="{'letter-spacing':labelWidth}">
					{{ label }}
				</view>
				<view class="row-c">
					<text class="size-28 p-r10"
						:style="{color:!inputValue?'#999':''}">{{!inputValue?'请选择':inputValue}}</text>
					<uni-icons type="forward" size="18" color="#D8D8D8"></uni-icons>
				</view>
			</view>
		</uni-datetime-picker>
	</view>
</template>

<script>
	export default {
		name: 'en-date',
		props: {
			type: {
				//date/daterange/datetime/datetimerange
				type: String,
				default: 'date'
			},
			label: {
				type: String,
				default: '标题'
			},
			placeholder: {
				type: String,
				default: '选择日期'
			},
			startDate: {
				type: String,
				default: '1950-01-01'
			},
			endDate: {
				type: String,
				default: '2099-12-13'
			},
			disabled: {
				default: false
			},
			border: {
				default: false
			},
			value: {
				default: ''
			},
			noBox: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				inputValue: '',
				labelWidth: 0
			}
		},
		components: {},
		mounted() {
			this.inputValue = this.value
			this.setLabelWidth()
		},
		watch: {
			'value': function() {
				if (this.inputValue !== this.value) {
					console.log('this.value:' + this.value)
					this.inputValue = this.value
				}
			},
			'inputValue': function() {
				this.$emit('input', this.inputValue)
			}
		},
		methods: {
			setLabelWidth() {
				let differenceNum = 4 - this.label.length;
				if (differenceNum === 2) {
					this.labelWidth = '2em'
				} else if (differenceNum === 1) {
					this.labelWidth = '0.5em'
				}
			},
			change(e) {
				this.inputValue = e
			}
		}

	}
</script>

<style lang="scss" scoped>
	@import url("../../static/css/en-common.css");

	.box {
		.input-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.input-box-left {
				font-size: 28rpx;
				color: #333333;
			}
		}
	}
</style>