更新记录

0.0.8（2025-07-18） 下载此版本

• fix: 修复显示最大值问题

0.0.7（2025-07-18） 下载此版本

• fix: 修复uniapp缺少formDisabled判断

0.0.6（2025-05-27） 下载此版本

• fix: 修复uniapp缺少inject

平台兼容性

云端兼容性

uni-app(4.61)

uni-app x(4.75)

其他

lime-stepper 步进器

一个功能丰富的步进器组件，用户可以通过调整增加按钮、减少按钮、数字输入框来调整具体需要的数值。组件支持设置最大值和最小值、步长、长按手势、禁用状态等多种配置，并提供多种尺寸和主题风格选择，兼容uniapp/uniappx。

插件依赖：lime-style、lime-icon、lime-shared

文档链接

📚 组件详细文档请访问以下站点：

• 步进器文档 - 站点1
• 步进器文档 - 站点2
• 步进器文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-stepper
2. 插件市场导入即可，首次导入可能需要重新编译
3. 在页面中使用l-stepper组件（组件）或lime-stepper（演示）

::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用， 若不需要删除即可 :::

代码演示

基础使用

通过 v-model 绑定输入值，可以通过 change 事件监听到输入值的变化。

<l-stepper v-model="value" />

const value = ref(1)

设置步长

通过 step 属性设置每次点击增加或减少按钮时变化的值，默认为 1。

<l-stepper v-model="value" :step="2" />

允许输入小数

默认限制输入整数，设置 integer 为 false 属性后，输入框将允许输入小数。

<l-stepper v-model="value" :integer="false" />

禁用状态

通过设置 disabled 属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。

<l-stepper v-model="value" :disabled="true" />

禁用输入框

通过设置 disable-input 属性来禁用输入框，此时按钮仍然可以点击。

<l-stepper v-model="value" :disable-input="true" />

尺寸选择

插件内置 size 提供三个尺寸：small、medium、large，默认为medium。还可以通过 input-width 属性设置输入框宽度，通过 size具体数值设置按钮大小和输入框高度。

<l-stepper v-model="value" size="small" />
<l-stepper v-model="value" size="large" />
<l-stepper v-model="value" input-width="40px" size="32px" />

异步受控模式

如果需要异步地修改输入框的值，可以通过change事件中手动修改value。

<l-stepper :value="asyncNumber" @change="asyncChange" />

// vue2
export default {
    data() {
        return {
            asyncNumber: 3,
        }
    },
    methods: {
        asyncChange(v) {
            uni.showLoading({
                title: '加载中'
            })
            setTimeout(() => {
                uni.hideLoading()
                if (v > 10) {
                    this.asyncNumber = 10
                    return
                }
                this.asyncNumber = v
            }, 1000);
        }
    }
}

// vue3
const asyncNumber = ref(3),
let timer = -1
const asyncChange = (v:number) => {
    clearTimeout(timer)
    uni.showLoading({
        title: '加载中'
    })
    timer = setTimeout(() => {
        uni.hideLoading()
        if(v > 10) {
            asyncNumber.value = 10
            return
        }
        asyncNumber.value = v 
    }, 1000);
}

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-stepper/components/lime-stepper -->
<lime-stepper />

插件标签说明

• 默认 l-stepper 为组件标签
• 默认 lime-stepper 为演示标签

Vue2使用说明

插件使用了composition-api，如果你希望在Vue2中使用，请按官方教程vue-composition-api配置。

关键代码是在main.js中的Vue2部分添加以下代码：

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API文档

Props

Events

主题定制

组件提供了下列 CSS 变量，可用于自定义样式。

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助