ElAutoResizer的使用姿势

相信有不少的开发同学都没有发现ElementPlus中的隐藏组件el-auto-resizer, 这个组件的源代码在el-table-v2中找到, 这个组件的主要目的是监听slot的尺寸变化, 然后将变化后的尺寸（width and height）暴露出来。

1. 使用方法

<script setup>
import { ElAutoResizer } from 'element-plus'

/**
 * 尺寸变化的回调函数
 * @param {{width: number, height: number}} size 
 */
const handleResize = ({ width, height }) => {
  console.log({ width, height })
}
<script>

<template>
  <ElAutoResizer :on-resize="handleResize">
    <template #default="{ width, height }">
      <!-- 当这里的尺寸变化后, 会触发组件 -->
      <p>width: {{ width }}px</p>
      <p>height: {{ height }}px</p>
    </template>
  </ElAutoResizer>
</template>

2. 项目实战

最近项目在做一个聊天的功能, 当有新消息时会自动将滚动条滚动到最底部, 于是我就使用ElAutoResizer和ElScrollbar组件来实现的

<script setup>
  const scrollbarRef = ref()
  const messageList = ref([])

  const handleResize = ({ height }) => {
    scrollbarRef.value?.setScrollTop(height)
  }
</script>

<template>
  <ElScrollbar ref="scrollbarRef">
    <ElAutoResizer :on-resize="handleResize">
      <!-- 示例代码 -->
      <div v-for="message in messageList" :key="message.id">
        {{ message.content }}
      </div>
    </ElAutoResizer>
  </ElScrollbar>
</template>

3. 注意事项

如果用了unplugin-element-plus/vite自动导入样式的插件, 需要配置一下, 让其不导入ElAutoResizer的样式（因为这个组件没有样式）, 如果不配置会报错的。

vite.config.js配置项如下:

import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  plugins: [
    ElementPlus({
      // Do not include the prefix in the name.
      // example: ElAutoResizer = AutoResizer, Because the character `el` is configurable
      ignoreComponents: ['AutoResizer']
    }),
  ]
})