AutoSkill Vue3 Element Plus CustomInputNumber 组件封装

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

install

source · Clone the upstream repo

git clone https://github.com/ECNU-ICALK/AutoSkill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/chinese_gpt4_8_GLM4.7/vue3-element-plus-custominputnumber-组件封装" ~/.claude/skills/ecnu-icalk-autoskill-vue3-element-plus-custominputnumber && rm -rf "$T"

manifest: SkillBank/ConvSkill/chinese_gpt4_8_GLM4.7/vue3-element-plus-custominputnumber-组件封装/SKILL.md

source content

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

技术栈：必须使用 Vue 3 的 Composition API (
```
<script setup>
```
)。
基础组件：使用 Element Plus 的
```
el-input
```
作为基础，不要直接使用
```
el-input-number
```
。
核心功能：
- 数字限制：只能输入数字（包括小数点和负号），过滤非数字字符。
- 精度控制：支持通过
```
precision
```
  prop 设置数字的小数位数。
- 清除功能：支持
```
clearable
```
  属性，允许一键清空输入。
- 步长调节：实现类似
```
el-input-number
```
  的增减按钮功能，支持
```
min
```
  、
```
max
```
  、
```
step
```
  属性。
Props 定义：
- ```
modelValue
```
  : 绑定值。
- ```
precision
```
  : 数字精度（小数位数）。
- ```
min
```
  : 最小值。
- ```
max
```
  : 最大值。
- ```
step
```
  : 步长。
- ```
clearable
```
  : 是否可清空。
- ```
controls
```
  : 是否显示增减按钮。
交互逻辑：
- 输入时过滤非法字符。
- 失去焦点（blur）时格式化数值以符合精度要求。
- 增减按钮需根据
```
min
```
  和
```
max
```
  值判断是否禁用。
- 使用
```
v-model
```
  进行双向绑定，触发
```
update:modelValue
```
  事件。

Communication & Style Preferences

代码应包含完整的
```
<template>
```
、
```
<script setup>
```
和必要的
```
<style>
```
。
使用中文注释解释关键逻辑。

Triggers

封装el-input实现数字输入
Vue3自定义数字输入组件
el-input增加精度和清除功能
实现CustomInputNumber组件