assess-app/page_task/module/wh-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">{{name}}<text></text> </view>
			<view class="row-c flex">
				<input class="wh-input sys-size-28 text-color-12 m-l40"
					placeholder-class="sys-size-28 text-color-999 sys-weight-400" :maxlength="maxlength" :type="type"
					:focus="focus" :placeholder="is_select ? '请选择' : placeholder?placeholder:`请输入${name}`"
					: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>
				<!-- 	<image class="m-l10" style="width: 16rpx;height: 24rpx;" src="/static/img/information/right-arrows.png"
					mode="aspectFill" v-if="is_select">
				</image> -->
			</view>
		</view>
		<view class="size-24 text-color-E21 p-b20 p-t10" v-if="is_requis">{{name}}为必填</view>
	</view>
</template>

<script>
	export default {
		name: 'wh-input',
		props: {
			is_select: {
				type: Boolean,
				default: false
			},
			is_border: {
				type: Boolean,
				default: true
			},
			is_requis: {
				type: Boolean,
				default: false
			},
			name: {
				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
			};
		},
		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
		},
		methods: {
			nameInput(e) {
				if (this.type === 'nickname') {
					this.inputValue = e.detail.value
				}

			},
			onSubmit() {

			}
		}
	}
</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: 110rpx;
		text-align: justify;
		text-align-last: justify;
		vertical-align: top;
		height: 0;
	}

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