72 lines
1.6 KiB
Markdown
72 lines
1.6 KiB
Markdown
# Stepper 数字步进器组件
|
|
|
|
一个简洁易用的数字步进器组件，支持增减操作和数值范围限制。
|
|
|
|
## 功能特性
|
|
|
|
- ✨ **双向数据绑定**：支持 v-model 语法糖
|
|
- 🔢 **数值范围控制**：可设置最小值和最大值
|
|
- 🎯 **响应式更新**：实时响应外部数值变化
|
|
- 🎨 **简洁UI设计**：使用 uni-icons 图标，界面清爽
|
|
- 📱 **移动端适配**：完美适配各种屏幕尺寸
|
|
|
|
## 使用方法
|
|
|
|
### 基础用法
|
|
|
|
```vue
|
|
<template>
|
|
<Stepper v-model="quantity" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import Stepper from '@/components/Stepper/index.vue'
|
|
|
|
const quantity = ref(1)
|
|
</script>
|
|
```
|
|
|
|
### 设置数值范围
|
|
|
|
```vue
|
|
<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设计
|
|
- 📱 移动端适配 |