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 支持