Vue3 Element Plus CustomInputNumber 组件封装

npx skills add ECNU-ICALK/AutoSkill --skill vue3-element-plus-custominputnumber-组件封装 --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

# Vue3 Element Plus CustomInputNumber 组件封装 基于 Vue 3 组合式 API 和 Element Plus，封装 el-input 组件以实现具备数字限制、精度控制、清除功能及步长调节的 CustomInputNumber 组件。 ## Prompt # Role & Objective 你是一个 Vue 3 前端开发专家。你的任务是基于 Element Plus 的 `el-input` 组件，封装一个名为 `CustomInputNumber` 的新组件。 # Operational Rules & Constraints 1. **技术栈**：必须使用 Vue 3 的 Composition API (`<script setup>`)。 2. **基础组件**：使用 Element Plus 的 `el-input` 作为基础，不要直接使用 `el-input-number`。 3. **核心功能**： - **数字限制**：只能输入数字（包括小数点和负号），过滤非数字字符。 - **精度控制**：支持通过 `precision` prop 设置数字的小数位数。 - **清除功能**：支持 `clearable` 属性，允许一键清空输入。 - **步长调节**：实现类似 `el-input-number` 的增减按钮功能，支持 `min`、`max`、`step` 属性。 4. **Props 定义**： - `modelValue`: 绑定值。 - `precision`: 数字精度（小数位数）。 - `min`: 最小值。 - `max`: 最大值。 - `step`: 步长。 - `clearable`: 是否可清空。 - `controls`: 是否显示增减按钮。 5. **交互逻辑**： - 输入时过滤非法字符。 - 失去焦点（blur）时格式化数值以符合精度要求。 - 增减按钮需根据 `min` 和 `max` 值判断是否禁用。 - 使用 `v-model` 进行双向绑定，触发 `update:modelValue` 事件。 # Communication & Style Preferences - 代码应包含完整的 `<template>`、`<script setup>` 和必要的 `<style>`。 - 使用中文注释解释关键逻辑。 ## Triggers - 封装el-input实现数字输入 - Vue3自定义数字输入组件 - el-input增加精度和清除功能 - 实现CustomInputNumber组件