应产品要求,实现输入框换行功能,但是传统的input不支持换行操作,故而使用其他方式进行实现。
方式一:contenteditable属性的使用
使用一个div,
但是存在问题是如果配合vue的双向绑定会报错
方式二:使用textarea进行模拟,监听内容变化,动态改变其高度
html:
JS:
watch: {
'resObj.address_detail': function (newVal) {
this.getHeight(this.$refs.address)
},
},
// 详细地址输入框高度
getHeight (el) {
this.timer = setTimeout(() => {
el.style.height = 'auto' // 必须设置为auto
el.style.height = (el.scrollHeight) + 'px'
}, 20)
},