vue3+ts<el-inpu></el-input> 隐藏电话中间四位

在 Vue 3 中结合 TypeScript 使用 Element UI 的 `<el-input>` 组件，并想要隐藏输入框中的电话号码中间四位，你可以创建一个自定义的输入组件并利用 `v-model` 和模板字符串来实现。首先，确保你已经在项目中安装了 Element Plus（Element UI 的 TypeScript 版本）。然后，按照以下步骤操作：

1. 创建一个名为 `InputWithMask.vue` 的文件，内容如下：

<template>
  <el-input v-model="phoneNumber" :placeholder="placeholder" :disabled="disabled">
    <span>{{ getMaskedPhoneNumber }}</span>
  </el-input>
</template>

<script lang="ts">
import { Component, Prop } from 'vue';

@Component({
  name: 'InputWithMask',
  components: {},
  props: {
    phoneNumber: {
      type: String,
      required: true,
    },
    placeholder: {
      type: String,
      default: '请输入电话号码',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    getMaskedPhoneNumber() {
      const mask = '* ** *** ***'; // 用于替换中间四位的星号
      return this.phoneNumber.replace(/\d/g, (digit) => mask[digit.charCodeAt(0) - '0'.charCodeAt(0)]);
    },
  },
})
export default class InputWithMask extends Vue {}
</script>

2. 在需要使用这个组件的地方，像这样引用它：

<template>
  <div>
    <InputWithMask :phoneNumber="phoneNumber" :placeholder="phonePlaceholder" :disabled="isDisabled"></InputWithMask>
  </div>
</template>

<script setup>
import InputWithMask from './components/InputWithMask.vue';
const phoneNumber = "1234567890";
const phonePlaceholder = "请输入电话号码";
let isDisabled = false; // 根据需要调整是否禁用输入

const inputComponent = ref(new InputWithMask({ phoneNumber, placeholder: phonePlaceholder, disabled: isDisabled }));
</script>

在这个例子中，`getMaskedPhoneNumber` 计算属性会动态地将电话号码的每一位替换成星号，实现了隐藏中间四位的效果。