Stepper 数字步进器组件
一个简洁易用的数字步进器组件，支持增减操作和数值范围限制。
功能特性
- ✨ 双向数据绑定：支持 v-model 语法糖
- 🔢 数值范围控制：可设置最小值和最大值
- 🎯 响应式更新：实时响应外部数值变化
- 🎨 简洁UI设计：使用 uni-icons 图标，界面清爽
- 📱 移动端适配：完美适配各种屏幕尺寸
使用方法
基础用法
<template>
<Stepper v-model="quantity" />
</template>
<script setup>
import { ref } from 'vue'
import Stepper from '@/components/Stepper/index.vue'
const quantity = ref(1)
</script>
设置数值范围
<template>
<Stepper
v-model="quantity"
:min="1"
:max="10"
/>
</template>
API
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | Number | 1 | 当前数值，支持 v-model |
| min | Number | 1 | 最小值 |
| max | Number | 100 | 最大值 |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:modelValue | 数值变化时触发 | (value: number) |
更新日志
v1.1.0 (2024-12-19)
修复响应性问题
- 🐛 修复组件不响应外部 modelValue 变化的问题
- 🔄 添加 watch 监听器，确保实时同步外部值变化
- ✨ 提升组件响应性和数据同步准确性
- 🎯 完善与父组件的双向数据绑定
v1.0.0
初始版本
- ✨ 基础数字步进器功能
- 🔢 支持数值范围控制
- 🎨 简洁的UI设计
- 📱 移动端适配