el-input只能输入百分比

### 配置 `el-input` 组件以确保只能输入百分比值

为了使 `el-input` 组件仅接受百分比格式的数据，可以利用正则表达式来验证用户的输入。通过自定义校验规则并将其应用于 `el-input` 的 `v-model` 或者直接设置 `input` 事件处理函数来进行实时过滤。

#### 方法一：使用 `formatter` 和 `parser`

Element Plus 提供了内置属性 `formatter` 和 `parser` 来格式化显示内容以及解析用户输入的内容[^2]：

<template>
  <el-input v-model="percentageValue" :formatter="formatPercentage" :parser="parsePercentage"></el-input>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const percentageValue = ref('0%');

function formatPercentage(value: string): string {
    const num = parseFloat(value);
    if (isNaN(num)) return '';
    return `${num}%`;
}

function parsePercentage(value: string): string {
    let cleaned = value.replace('%', '');
    const parsedNum = parseFloat(cleaned);
    if (!isNaN(parsedNum)) {
        return String(Math.min(100, Math.max(0, parsedNum)));
    }
    return '';
}
</script>

这种方法能够有效地控制用户输入的同时保持良好的用户体验，因为每当用户键入字符时都会被转换成合法的形式展示给用户看。

#### 方法二：监听 `input` 事件进行即时筛选

另一种方式是在每次发生键盘交互之后立即清理不符合条件的部分，这可以通过监听 `@input` 事件实现：

<template>
  <el-input @input="handleInput" v-model="percentageValue"></el-input>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const percentageValue = ref('');

function handleInput(event: Event) {
    let inputStr = event.target ? (event.target as HTMLInputElement).value : '';

    // 移除所有非数字和%
    inputStr = inputStr.replace(/[^0-9\.]/g, '');

    // 如果存在%，移除它直到最后一位
    while (inputStr.indexOf('%') !== -1 && inputStr.lastIndexOf('%') != inputStr.length - 1) {
        inputStr = inputStr.substring(0, inputStr.length - 1);
    }

    // 添加 % 符号到结尾处如果没有的话
    if (inputStr[inputStr.length - 1] !== '%' && inputStr !== '') {
        inputStr += '%';
    }

    // 更新模型数据
    percentageValue.value = inputStr;
}
</script>

此方法更侧重于防止非法字符进入输入框内，并且自动调整超出范围的数值至合理区间之内。

这两种方案都可以很好地满足需求，在实际开发过程中可以根据具体场景和个人偏好选择合适的方式实施。