num-input

微信小程序自定义组件带加减的数字输入框。

预览

使用

1. 安装

$ yarn add num-input

2. 点击开发者工具中的菜单栏：工具 --> 构建 npm
3. 在需要使用的页面配置文件中添加引用

{
  "usingComponents": {
    "num-input": "num-input"
  }
}

更多关于小程序中使用 npm 包的信息参见官方文档 npm 支持。

示例：

page.json

{
  "usingComponents": {
    "num-input": "num-input"
  }
}

page.wxml

<num-input bindinput="onInput" value="{{ num }}" size="m" />

page.js

Page({
  data:{
    num: 1,
  }
  onInput(event) {
    this.setData({
      num: event.detail.value
    })
  },
});

配置项

| 属性 | 默认值 | 描述 | | -------------------- | ------ | ---------------------------------- | | value | - | 输入框的值 | | disabled | - | 是否禁用 | | step | 1 | 加减点击后的步长 | | ext-class-input | - | 自定义输入框类名 | | ext-class-increase | - | 自定义加号按钮框类名 | | ext-class-decrease | - | 自定义减号按钮类名 | | size | m | 尺寸，可选值 s|m|l |

事件

| 事件名 | 描述 | | ------- | ---------------- | | input | 输入框的发生变化 |

相关资源

• 小程序自定义组件文档
• weui 文档
• 组件样式
• npm 支持