Vue 3 自定义多行文本输入组件

在Vue 3项目中，我们经常需要创建自定义的UI组件，以满足特定的业务需求。本篇博客将介绍一个基于Vue 3的自定义多行文本输入组件，该组件具有灵活的配置选项和一些特定的功能，使其适用于各种场景。

组件结构

首先，让我们来看一下这个自定义组件的基本结构：

<template>
  <div
    class="input-count-container"
    :class="`${disabled ? 'is-disabled' : ''}`"
    :style="`height: ${height}; width: ${width}`">
    <div
      ref="displayContentRef"
      class="content-wrapper"
      v-html="displayContent"
      :contenteditable="!disabled"
      @blur="onDisplayContentBlur"
      @input="onDisplayContentInput"></div>
  </div>
</template>

<script setup lang="ts">
// 省略了引入部分

const emits = defineEmits(['update:modelValue', 'addressInputs']);
const props = defineProps({
  modelValue: {
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  height: {
    type: String,
    default: '100px'
  },
  upperCase: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '15vw'
  }
});
const displayContentRef = ref();
const displayContent = ref('');

// 省略了其他变量和方法的声明
</script>

<style scoped lang="scss">
// 省略了样式部分
</style>

主要特性

1. 支持自动高度调整，可以设置固定的高度或百分比高度。
2. 可以禁用输入，添加 .is-disabled 类来显示禁用状态。
3. 可以转换输入为大写字母形式。
4. 支持设置组件的宽度。

组件功能

失焦事件处理

const onDisplayContentBlur = (event) => {
  const $displayContent = displayContentRef.value;

  let updateContent = $displayContent.innerText.replace(/\n\n/gi, '\n');

  if (props.upperCase) {
    updateContent = updateContent.toUpperCase();
  }

  emits('update:modelValue', updateContent);
};

在失焦事件处理中，我们对文本进行了一些处理，去除了多余的换行符，并且根据配置将文本转换为大写形式。

输入事件处理

const onDisplayContentInput