YGChatCS/components/Stepper/README.md

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设计
• 📱 移动端适配