# Vue3 Element Plus CustomInputNumber 组件封装

> 基于 Vue 3 组合式 API 和 Element Plus，封装 el-input 组件以实现具备数字限制、精度控制、清除功能及步长调节的 CustomInputNumber 组件。

- Skill: `ecnu-icalk/vue3-element-plus-custominputnumber` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/vue3-element-plus-custominputnumber`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/vue3-element-plus-custominputnumber/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/vue3-element-plus-custominputnumber

---


# 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组件