一文读懂 Element UI Textarea 自适应文本高度功能的实现原理

2023-09-13 14:15:19

Element UI Textarea：拥抱自由，自适应文本高度功能揭秘

前言

在浩瀚的 Vue.js 生态系统中，Element UI 以其丰富的组件库、出色的性能和高度的可定制性傲视群雄。而其中，Textarea 组件更是凭借其强大的自适应文本高度功能，成为开发者的心头好。让我们深入探究这一功能的实现原理，揭开它背后的魅力。

自适应高度，一览无余

想象一下，当你奋笔疾书地敲击键盘，输入大量文本时，Textarea 组件会贴心地自动调整其高度，让你尽情挥洒文采，无需担心滚动条或文本溢出的困扰。这无疑是提升用户体验的一大福音，特别是对于那些需要输入大量文本的场景来说，再合适不过了。

实现思路，妙不可言

自适应文本高度功能的实现思路可谓妙不可言，它巧妙地利用了 CSS 中的 auto ，让文本域的高度随着内容的增多而自动增长。同时，为了防止文本域无限伸展，还设置了一个最大高度来加以限制。

源代码分析，一探究竟

为了更好地理解这一功能的实现原理，我们不妨一探究竟，看看 Element UI 是如何通过代码实现这一魔法的。

import { onMounted, ref, watch } from 'vue';

export default {
  name: 'TextareaAutosize',
  props: {
    autosize: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const { minRows, maxRows } = props.autosize;
    const textareaRef = ref(null);
    const textareaStyle = ref({});

    onMounted(() => {
      watch(() => textareaRef.value.scrollHeight, (newHeight) => {
        const { minRows, maxRows } = props.autosize;
        const height = Math.min(Math.max(newHeight, minRows * 20), maxRows * 20);
        textareaStyle.value.height = `${height}px`;
      }, { immediate: true });
    });

    return { textareaRef, textareaStyle };
  },
  render() {
    return (
      <el-textarea ref={textareaRef} style={textareaStyle} />
    );
  }
};