更新记录

0.0.2（2024-10-07） 下载此版本

• chore: 更新文档

0.0.1（2024-10-07） 下载此版本

• init

平台兼容性

lime-stepper 步进器

• 步进器用户通过调整增加按钮、减少按钮、数字输入框来调整具体需要的数值，可设置最大值和最小值，兼容uniapp/uniappx(h5,ios,安卓)
• 插件依赖lime-style、lime-icon、lime-shared，当前版本为初版，不喜勿下

安装

插件市场导入即可，首次导入可能需要重新编译

代码演示

基础使用

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

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

设置步长

通过 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" />

禁用输入框

通过设置 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/compoents/lime-stepper -->
<lime-stepper />

插件标签

• 默认 l-stepper 为 component
• 默认 lime-stepper 为 demo

关于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

主题定制

样式变量

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

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。