front-end/ghsApp/src/components/app-textarea.vue

<template>
	<!-- @focus="focus" -->
	<div class="app">
		<textarea v-if="currentIsFocus" class="textarea-input" :focus="currentIsFocus" :auto-height="autoHeight" @blur="blur" @focus="focus" :disabled="disabled" @input="changeInput" :placeholder="placeholder" :maxlength="maxlength" @linechange="lineChange" :placeholder-class="placeholderClass" @confirm="confirm" v-model="currentValue"></textarea>
		<div v-else class="textarea-box" @click="focus">
			<div class="textarea-placeholder" v-if="$util.isEmpty(currentValue)">{{placeholder}}</div>
			<div :style="{height:autoHeight?currentHeight:'auto'}" class="textarea-dec" v-else>{{currentValue}}</div>
		</div>
	</div>
</template>

<script>
/**
	 * 解决textarea 层级最高问题
	 *
	 */
export default {
	name: 'appTextarea', //
	props: {
		value: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: ''
		},
		maxlength: {
			type: Number,
			default: 200
		},
		autoHeight: {
			type: Boolean,
			default: true
		},
		disabled: {
			type: Boolean,
			default: false
		},
		isFocus: {
			type: Boolean,
			default: false
		},
		placeholderClass: {
			type: String,
			default: 'placeholder'
		}
	},
	data() {
		return {
			currentValue: '',
			isBlur: true,
			currentHeight: '',
			currentIsFocus: false
		}
	},
	created() {
		this.currentValue = this.$util.isEmpty(this.value) ? '' : this.value
		this.currentIsFocus = this.isFocus
	},
	methods: {
		blur() {
			this.currentIsFocus = false
			this.$emit('blur')
		},
		focus() {
			this.currentIsFocus = true
			this.$emit('focus')
		},
		changeInput(event) {
			this.$emit('input', event.target.value)
		},
		lineChange(val) {
			this.currentHeight = val.detail.height + 'px'
		},
		confirm() {
			this.currentIsFocus = false
		}
	},
	watch: {
		value(val) {
			this.currentValue = val
		},
		currentValue(val) {
			this.$emit('input', val)
		},
		isFocus(val) {
			this.currentIsFocus = val
		}
	}
}
</script>

<style lang="scss" scoped>
	.app {
		width: 100%;
		height: 100%;
		// line-height: 1;
		display: inline-block;
		& .textarea-input {
			width: 100%;
			min-height: 36upx;
			height: 100%;
			font-size: 28upx;
			color: #4d4d4d;
		}
		& .textarea-box {
			font-size: 0;
			display: block;
			position: relative;
			cursor: auto;
			min-height: 36upx;
			height: 100%;
			width: 100%;
			overflow-y: auto;
			& .textarea-dec {
				font-size: 28upx;
				color: #4d4d4d;
				word-wrap: break-word;
				word-break: break-all;
				white-space: pre-wrap;
				// line-height: 33upx;
			}
			& .textarea-placeholder {
				display: inline-block;
				font-size: 28upx;
				color: #ccc;
				vertical-align: middle;
			}
		}
	}
	.placeholder {
		font-size: 28upx;
		color: #ccc;
	}
</style>