我正在参加「掘金·启航计划」
表单备注列，移动端使用，产品经理给的设计图是两行文字的框，但是输入文字过多时要自动改变框的高度，input不能实现此种功能，textarea框做起来会很麻烦，需要按照文字多少去计算高度，还要针对滚动条修改，不过网上能搜到很多案例，但是好像都是一样的，看起来比较麻烦，如果使用的是UI组件开发，需要用到里面的一些条件限制时建议使用 因为我的是直接使用原生html，所以都是自己写的，不必要考虑兼容组件 div可以按照文字输入的多少高度自动变化，所以现在使用div仿照textarea做 contenteditable：设置html的contentEditable="true"时，即可开启该元素的编辑模式 `<div
class="textarea"
@input="changeText"
ref="divRef"
contenteditable="true"
@focus="isLocked = true"
@blur="isLocked = false"
v-text="content"
placeholder="请简要描述故障或问题"
>`
此处监听是因为做了一个提交按钮是否可点击功能，只有所有内容填写后才可以点击，对于div做的输入框，需要每次都进行单独验证，因为它没有值时是有一个‘/n’存在的
` watch(form, async (newQuestion, oldQuestion) => {
if(newQuestion.questionDescribe=='\n'){
form.questionDescribe=''
}
if (flagForm(newQuestion)&& chooseHouse.value.id!=='') {
formRole.value = true;
} else {
formRole.value = false;
}
});
watch(chooseHouse, async (newQuestion, oldQuestion) => {
if(form.questionDescribe=='\n'){
form.questionDescribe=''
}
if (flagForm(form)&& chooseHouse.value.id!=='') {
formRole.value = true;
} else {
formRole.value = false;
}
}); `
div的值赋给表单
`function changeText() {
// @ts-ignore
if (divRef.value && divRef.value.innerText) {
// @ts-ignore
form.questionDescribe = divRef.value.innerText;
}
}`
`.textarea {
display: inline-block;
width: 200px;
min-height: 20px;
max-height: 100px;
padding-top: 10px;
word-break: break-all;
resize: vertical;
overflow: auto;
outline: none;
border: none;
font-size: 14px;
font-weight: 400;
color: rgba(51, 51, 51, 1);
user-modify: read-write-plaintext-only;
-webkit-user-modify: read-write-plaintext-only;
user-select: auto;
-webkit-user-select: auto;
//placeholder获取一次焦点后会不再显示
&:empty:before {
content: attr(placeholder);
font-size: 14px;
font-weight: 400;
color: rgb(218, 216, 216);
}
}`
