Vue input textarea自动滚动到最底部
这是什么意思,就是类似于QQ聊天框一样的效果,新来的一条一条的消息会不停地补充在textarea输入框,然后展示最新来得数据,就需要textarea输入框的滚动条默认下滑到最下面。
首先定一个textarea类型的input组件
首先使用 vue,其实一样,但是我使用了 element 组件库,其实不影响,和单纯的 textarea 效果一样。主要就是给 textarea 添加一个 id 或者是 class ,在后面新数据添加到输入框之后获取到元素,把他的滚动条滚动高度设置成滚动最大高度就可以。
<el-input
id="textarea_id"
type="textarea"
:rows="20"
placeholder="请输入内容"
v-model="textarea"
readonly="">
</el-input>
每次新增内容都要调用
const textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
这样就可以了,需要在每次输入框数据添加后都要添加这两行代码,这样才能保证每次新数据来滚动条滚动到最后。
留坑
这样写之后,理论是可以的,但是我写了之后不行!!!
为什么,找了好久原因。
填坑
哈哈哈,很简单不用解释,一看就又一种恍然大明白的感觉…
this.$nextTick(() => {
setTimeout(() => {
const textarea = document.getElementById('scroll_text');
textarea.scrollTop = textarea.scrollHeight;
}, 13)
})
其实 $nextTick 就可以,在加个延时确保肯定没问题!