监测元素高度变化，将 chat 的输出滚动到最底部

资料

vue监听元素高度指令

源码

使用指令的方式进行 dom 的监测

• directive/resize.js

// 监听元素高度变化
const resize = {
    bind(el, binding) {
        let width = '',
            height = ''
        function isResize() {
            const style = document.defaultView.getComputedStyle(el)
            if (width !== style.width || height !== style.height) {
                binding.value()
            }
            width = style.width
            height = style.height
        }
        el._vueSetInterval_ = setInterval(isResize, 100)
    },
    unbind(el) {
        clearInterval(el._vueSetInterval_)
    }
}
export default resize

• directive/index.js

import resize from './resize'

// 自定义指令
const directives = {
    resize
}

export default {
    install(Vue) {
        Object.keys(directives).forEach((key) => {
            Vue.directive(key, directives[key])
        })
    }
}

• main.js

import Vue from 'vue'

import Directive from '@/directive'

Vue.use(Directive)

具体使用

<div class="talk-content" ref="drawerTalkContent">
  <div class="talk-list" v-resize="scrollToBottom">
    <div class="talk-item" v-for="(item, index) in drawerTalkList" :key="index">
      // 这里是 chat 的输出的具体内容
    </div>
  </div>
</div>

// 滚动到对话框最底部
scrollToBottom() {
  const drawerTalkContent = this.$refs.drawerTalkContent
  drawerTalkContent.scrollTop = drawerTalkContent.scrollHeight
}