华玥组件库

中文

English

中文

English

Appearance

NumberBox 步进器组件 ​

该组件一般用于商城购物选择物品数量的场景

温馨提示

本项目参考了 uView-Plus 开源项目的组件开发方式，基于 Vue 3 和 TypeScript 实现了自定义组件。目前该组件仍处于测试阶段。
感谢 uView-Plus 开源项目及其团队成员的贡献，他们的组件开发思路为本项目提供了宝贵地参考。如果需要了解更多组件开发细节，可以参考uView-Plus的 numberBox组件 的代码实现。

注意

注意：该输入框只能输入大于或等于0的整数

平台差异说明 ​

APP(vue)H5微信小程序
✔✔✔

基本使用示例 ​

html
<!-- 全局使用 -->
<hy-number-step  v-model="value"></hy-number-step>
<!-- 单个组件引入 -->
<HyNumberStep  v-model="value"></HyNumberStep>
ts
import { HyNumberStep } from "hy-app"
import { vue } from "vue";

const value = ref(12);

步长设置 ​

  • 通过step属性设置每次点击增加或减少按钮时变化的值，默认为1，下面示例每次都会加2或者减2
html
<template>
    <hy-number-step v-model="value" :step="2"></hy-number-step>
</template>

限制输入范围 ​

  • min-最小值
  • max-最大值
html
<template>
    <hy-number-step v-model="value" :min="1" :max="100"></hy-number-step>
</template>

限制只能输入整数 ​

  • 通过integer限制输入类型
html
<template>
    <hy-number-step v-model="value" integer></hy-number-step>
</template>

禁用 ​

  • 通过disabled禁用步进器，禁用状态下无法点击加减按钮或修改输入框的值
  • 通过disabledInput禁用输入框
  • 通过disablePlus禁用增加按钮
  • 通过disableMinus禁用减少按钮
  • 通过longPress禁用长按事件
html
<!-- 通过设置`disabled`参数来禁用输入框，禁用状态下无法点击加减按钮或修改输入框的值 -->
<hy-number-step :disabled="true"></hy-number-step>

<!-- 禁用输入框 -->
<hy-number-step :disabledInput="true"></hy-number-step>

<!-- 禁用增加按钮 -->
<hy-number-step :disablePlus="true"></hy-number-step>

<!-- 禁用减少按钮 -->
<hy-number-step :disableMinus="true"></hy-number-step>

<!-- 禁用长按 -->
<hy-number-step :longPress="false"></hy-number-step>

颜色和大小 ​

  • 通过button-size参数设置按钮大小
  • 通过icon-style参数设置加减按钮图标的样式
html
<template>
    <hy-number-step 
            v-model="value"
            button-size="36"
            color="#ffffff"
            bgColor="#2979ff"
            iconStyle="color: #fff"
    ></hy-number-step>
</template>

自定义插槽 ​

html
<template>
    <hy-number-step v-model="value">
        <template #minus>
            <view
                class="minus"
            >
                <up-icon
                    name="minus"
                    size="12"
                ></up-icon>
            </view>
        </template>
        <template #input>
            <text
                style="width: 50px;text-align: center;"
                class="input"
            >{{value}}</text>
        </template>
        <template #plus>
            <view
                class="plus"
            >
                <up-icon
                    name="plus"
                    color="#FFFFFF"
                    size="12"
                ></up-icon>
            </view>
        </template>
    </hy-number-step>
</template>
ts
import { ref } from 'vue';

// 创建响应式数据  
const value = ref(1);
scss
.minus {
  width: 22px;
  height: 22px;
  border: 1px solid black;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input {
  padding: 0 10px;
}

.plus {
  width: 22px;
  height: 22px;
  background-color: #ff0000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

API ​

参数说明类型默认值
v-model用于双向绑定的值，初始化时设置设为默认min值(最小值)boolean-
min用户可输入的最小值number1
max用户可输入的最大值numberNumber.MAX_SAFE_INTEGER
step步长，每次加或减的值， 支持小数值，如需小数number1
integer是否只能输入正整数booleanfalse
disabled是否禁用操作，包括输入框，加减按钮booleanfalse
disabledInput是否禁止输入框booleanfalse
asyncChange是否开启异步变更，开启后需要手动控制输入值booleanfalse
inputWidth输入框宽度，单位pxstring|number35
showMinus是否显示减少按钮booleantrue
showPlus是否显示增加按钮booleantrue
decimalLength显示的小数位数string|number-
longPress是否允许长按进行加减booleantrue
color输入框文字和加减按钮图标的颜色string#323233
buttonWidth按钮宽度，单位pxstring|number30
buttonSize按钮高度，单位px，输入框高度和此值保持一致string|number30
buttonRadius按钮圆角string|number2px
bgColor输入框和按钮的背景颜色string#EBECEE
inputBgColor输入框独立背景颜色string#EBECEE
cursorSpacing指定光标于键盘的距离，避免键盘遮挡输入框，单位pxstring|number100
disablePlus是否禁用增加按钮booleanfalse
disableMinus是否禁用减少按钮booleanfalse
minusIcon减号按钮图标属性集合，详见图标ApiHyIconProps-
plusIcon加号按钮图标属性集合，详见图标ApiHyIconProps-
miniMode迷你模式常用于外卖，值为0时只显示+号按钮booleanfalse
customStyle定义需要用到的外部样式CSSProperties-

Events ​

事件名说明回调参数
focus输入框得到焦点触发value: 数值
blur输入框失去焦点时触发value: 数值
change输入框内容发生变化时触发value: 数值
overLimit超过范围阈值时触发type: minus|plus
plus点击增加按钮value: 数值
minus点击减少按钮value: 数值

Slots ​

插槽名说明接收值
minus减少按钮-
input输入框record
plus增加按钮-
00:46