el-input显示隐藏手机号中间数字

在Vue.js的Element UI库中，`el-input`是一个用于输入框组件，如果你想让手机号码显示为部分隐藏，可以使用它的`placeholder`属性配合自定义模板或者使用指令来达到效果。

例如，你可以设置`placeholder`为“** ** *** ** **”，星号(*)会代替实际的数字。如果你想要更复杂的逻辑，比如点击某个按钮才展示隐藏的号码，你可以通过JavaScript事件处理来控制显示和隐藏：

<template>
  <el-input v-model="phoneNumber" placeholder="**** **** ****"></el-input>
  <button @click="showNumber">显示全号</button>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '1234567890',
      showHiddenNumbers: false,
    };
  },
  methods: {
    showNumber() {
      this.showHiddenNumbers = !this.showHiddenNumbers;
      if (this.showHiddenNumbers) {
        this.phoneNumber = this.phoneNumber.toString();
      } else {
        // 将手机号恢复为占位符模式，这里假设我们只隐藏了中间四个数字
        this.phoneNumber = '**** ' + this.phoneNumber.slice(-7);
      }
    },
  },
};
</script>

在这个例子中，当点击“显示全号”按钮时，`showHiddenNumbers`的状态会被切换，然后`phoneNumber`的值会相应地改变，实现了手机号的显示和隐藏效果。