html
rows 1 一定要写 不然输入就会撑开两行的高度
其余样式按照要求去写就OK
<textarea type="text" rows="1" v-auto-resize placeholder="请输入详细地址"></textarea>
js 使用的是vue2 自定义指令
directives: {
'auto-resize': {
bind(el) {
// 设置textarea的高度自动增长
el.style.overflow = 'hidden'
el.style.resize = 'none'
el.style.boxSizing = 'border-box'
// 处理输入事件
const resizeTextarea = () => {
el.style.height = 'auto'
el.style.height = `${el.scrollHeight}px`
}
// 初始调用调整高度
resizeTextarea()
// 监听输入事件
el.addEventListener('input', resizeTextarea)
// 解绑时移除事件监听
el._resizeTextarea = resizeTextarea
},
unbind(el) {
el.removeEventListener('input', el._resizeTextarea)
}
}
}