image.png
原理：
通过设置元素的data-* 属性的值，再通过css属性attr(data-*)获取设置的值，然后再使用before再input前面添加一个伪类元素，再设置输入框text-indent的值即可实现
html->input
<el-input class='textarea-prepend' v-model="messageDetail.content" placeholder="" type="textarea" :rows="3" ></el-input>
css 部分(重要)
.textarea-prepend::before {
background-color: #f5f7fa;
color: #909399;
display: block;
position: absolute;
content: attr(data-content); /* 极为重要，可获取元素上携带的data-* 属性的值*/
top: 1px;
left: 1px;
border-radius: 4px;
padding: 4px;
white-space: nowrap;
line-height: normal;
}
js部分：
//因为此项目的需求导致输入框的前置文本是不同的，前置文本的字数长度也是不同的所以使用js来动态设置data-content属性的值和input输入框css属性text-indent的值
mounted() {
const el = document.querySelector('.textarea-prepend')
el.setAttribute('data-content', this.tenantMessageInfo.smsSign)
const textArea = document.querySelector('.textarea-prepend .el-textarea__inner')
textArea.style.textIndent = this.tenantMessageInfo.smsSign.length * 14 + 'px'
this.totalContent = this.tenantMessageInfo.smsSign + this.messageDetail.content
},
如果你的前置值是固定的就不需要js了
只需在input框上面加入data-*的属性就可以了
