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

<template>
	<view class="wh-box">
		<view class="row p-tb30" style="line-height: 30rpx;height: 30rpx;" :class="{'bor-bottom-1':is_border}">
			<view class="wh-text size-28" :class="{'wh-text-long':isLong}">{{label}}<text></text></view>
			<view class="row-c flex" @click="inputBut">
				<input class="wh-input sys-size-28 text-color-12 m-l40" placeholder-class="sys-size-28 text-color-999"
					:maxlength="maxlength" :type="type" :focus="focus"
					:placeholder="is_select ? '请选择' : placeholder?placeholder:`请输入${label}`" :disabled="disabled"
					v-model="inputValue" @blur="nameInput" @input="nameInput"></input>
				<view class="" style="margin-top: 4rpx;">
					<uni-icons type="forward" size="18" color="#D8D8D8" v-if="is_select"></uni-icons>
				</view>
			</view>
			<text class="sys-size-28 m-l20" v-if="rightText">{{rightText}}</text>
			<slot></slot>
		</view>
		<view class="size-24 text-color-E21 p-b20 p-t10" v-if="is_requis">{{name}}为必填</view>
	</view>
</template>

<script>
	export default {
		name: 'en-input',
		props: {
			is_select: {
				type: Boolean,
				default: false
			},
			is_border: {
				type: Boolean,
				default: true
			},
			is_requis: {
				type: Boolean,
				default: false
			},
			label: {
				type: String,
				default: '姓名'
			},
			rightText: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'text'
			},
			placeholder: {
				type: String,
				default: ''
			},
			disabled: {
				default: false
			},
			value: {
				default: ''
			},
			maxlength: {
				default: 140
			},
			focus: {
				default: false
			}
		},
		data() {
			return {
				inputValue: '',
				showShake: false,
				isLong: false
			};
		},
		watch: {
			'value': function() {
				if (this.inputValue !== this.value) {
					console.log(this.inputValue)
					this.inputValue = this.value
				}
			},
			'inputValue': function() {
				this.$emit('input', this.inputValue)
			}
		},
		mounted() {
			this.inputValue = this.value
			this.setLabelWidth()
		},
		methods: {
			nameInput(e) {
				if (this.type === 'nickname') {
					this.inputValue = e.detail.value
				}
			},
			setLabelWidth() {
				this.isLong = this.label.length > 4
			},
			onSubmit() {},
			inputBut() {
				this.$emit('inputBut')
			}
		}
	}
</script>

<style lang="scss">
	.wh-box {
		z-index: 1;

		.wh-input {
			width: 100%;
			text-align: right;
			direction: rtl;
		}

		.wh-input-placeholder {
			color: #999999;
			font-size: 28rpx;
		}
	}

	.wh-text {
		width: 120rpx;
		text-align: justify;
		text-align-last: justify;
		vertical-align: top;
		height: 0;
		padding-top: 2rpx;
	}


	.wh-text:after {
		content: '';
		width: 110rpx;
		height: 0;
		display: inline-block;
		overflow: hidden;
	}

	.wh-text-long {
		width: 170rpx;
	}

	.wh-text-long:after {
		width: 170rpx;
	}
</style>