vue+element+在输入框末端加单位可切换

在Vue.js配合Element Plus框架中，如果你想要实现在输入框（Input）的末尾添加单位并允许用户切换，你可以使用Element Plus的`el-input-number`组件，它内置了数字输入的功能，并提供了一些自定义选项。下面是一个简单的示例：

首先，在模板（template）部分，你会创建一个`<el-input-number>`元素：

<template>
  <el-form-item label="金额">
    <el-input-number
      v-model.number="value"
      placeholder="请输入金额"
      :append-icon="unit === '元'" <!-- 使用v-bind绑定单位图标 -->
      @change="switchUnit" <!-- 触发单位切换事件 -->
    ></el-input-number>
    <i class="unit-icon" :class="{ active: unit === '元' }">¥</i> <!-- 单位切换按钮 -->
  </el-form-item>
</template>

然后，在JavaScript部分（script），你需要设置初始值并定义切换单位的函数：

<script setup>
import { ref } from 'vue';

const value = ref(0);
let unit = '元'; // 初始单位

function switchUnit() {
  if (unit === '元') {
    unit = '角'; // 或者其他单位
  } else {
    unit = '元';
  }
}
</script>

最后，确保你在CSS中定义了`.unit-icon`类的样式，以便显示和隐藏单位。