html
rows 1 一定要寫 不然輸入就會撐開兩行的高度
其余樣式按照要求去寫就OK
<textarea type="text" rows="1" v-auto-resize placeholder="請輸入詳細(xì)地址"></textarea>
js 使用的是vue2 自定義指令
directives: {
'auto-resize': {
bind(el) {
// 設(shè)置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`
}
// 初始調(diào)用調(diào)整高度
resizeTextarea()
// 監(jiān)聽輸入事件
el.addEventListener('input', resizeTextarea)
// 解綁時移除事件監(jiān)聽
el._resizeTextarea = resizeTextarea
},
unbind(el) {
el.removeEventListener('input', el._resizeTextarea)
}
}
}
