需求设想
实现一个具有默认高度,且随着输入内容的增加自动撑开高度的输入框
技术支持
-
visibility: hidden;
隐藏DOM但是仍然占位 -
contenteditable="true"
为div
添加属性可以模拟输入
方法
div模拟textarea实现
HTML:
<div class="full-test" contenteditable="true">
{{divInputValue}}
</div>
CSS:
.full-test{
width: 100%;
min-height: 40px;
height: auto;
overflow: auto;
border: 1px solid black;
outline: none;
}
JS:
export default {
data () {
return {
divInputValue: ''
}
}
}
这种方式能实现,但是有一个问题,在我的vue项目中,只要一刷新就会失效,必须重新跑服务
用隐藏的p标签撑开高度
HTML:
<div class="full-box">
<p>
{{textareaValue}}
</p>
<textarea placeholder="输入文字" v-model="textareaValue"></textarea>
</div>
CSS:
.full-box
width: 100%;
height: auto;
background-color: #fff;
position: relative;
p
margin: 0;
padding: 0;
visibility: hidden;
word-wrap: break-word;
line-height: 1.16rem;
min-height: 30px;
textarea
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: left;
line-height: 1.15rem;
margin: 0;
padding: 0;
JS:
export default {
data () {
return {
textareaValue: ''
}
}
}
这种方式的实现思路是
textarea
跟随父元素高度,同时用兄弟原色撑开父元素即可值得注意的点是
p
标签与textarea
的文字设置需要一致
组件封装
/**
* 实现随着输入内容增多,自动增高的输入框
* 父组件调用示例:
* <taTextarea
* :textareaValue="divInputValue"
* v-model="divInputValue"></taTextarea>
* @time: 2018.9.20
* @Author: Nick_yangxiaotong
*/
<template>
<div class="ta-textarea">
<p>
{{textValue}}
</p>
<textarea
:class="{ 'align-right': alignRight }"
:placeholder="placeholder"
v-model="textValue"></textarea>
</div>
</template>
<script>
export default {
data () {
return {
textValue: ''
}
},
props: {
textareaValue: { // 默认文案
type: String,
default: ''
},
placeholder: { // 文本提示文案
type: String,
default: '请输入'
},
alignRight: { // 文本是否需要右对齐
type: Boolean,
default: false
}
},
created () {
if (this.textareaValue) this.textValue = this.textareaValue
},
watch: {
// 监听数据变化,改变父组件值
textValue () {
this.$emit('input', this.textValue)
}
}
}
</script>
<style lang="stylus" scoped>
.ta-textarea
width: 100%;
height: auto;
background-color: #fff;
position: relative;
p
margin: 0;
padding: 0;
visibility: hidden;
word-wrap: break-word;
line-height: 1.16rem;
min-height: 30px;
textarea
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
line-height: 1.15rem;
text-align left;
.align-right
text-align: right;
</style>