Number 步进器
使用指南
在 page.json 中引入组件
"usingComponents": {
"w-number": "wuss-weapp/w-number/index",
}
图片演示
代码演示
<w-pane title="Number" desc="计数器" />
<w-pane desc="Default" />
<w-number wuss-class="w-number" />
<w-pane desc="DefaultValue = 1000" />
<w-number wuss-class="w-number" defaultValue="1000" />
<w-pane desc="Min = 10,Max = 100" />
<w-number
wuss-class="w-number"
max="100"
min="10"
/>
<w-pane desc="Width = 150" />
<w-number
width="150"
default-value="233333333"
wuss-class="w-number"
/>
<w-pane desc="Steps = 10" />
<w-number
default-value="100"
steps="10"
wuss-class="w-number"
/>
<w-pane desc="buttonType = circle" />
<w-number
default-value="100"
button-type="circle"
wuss-class="w-number"
/>
<w-pane desc="Fillable" />
<w-number
fillable="{{ false }}"
default-value="100"
wuss-class="w-number"
/>
<w-pane desc="Disabled" />
<w-number disabled wuss-class="w-number" />
<w-pane desc="In Cell" />
<w-cell-group>
<block wx:for="{{ items }}" wx:key="item">
<w-cell label="{{ item }}">
<w-number
slot="content"
button-type="circle"
default-value="{{ index }}"
max="1000"
/>
</w-cell>
</block>
</w-cell-group>
data: {
items: ['娃娃菜', "牛肉脯", "鸡柳", "酸菜鱼", "卤蛋", "鱼豆腐", "章鱼丸", "空心菜", "猪血", "番茄", "黄瓜", "鸭肠", "牛杂"],
},
.w-number {
margin: 15px;
}
API
Attribute 属性
属性 |
说明 |
类型 |
默认值 |
defaultValue |
当前默认值 |
number |
0 |
max |
最大值 |
number |
Infinity |
min |
最小值 |
number |
0 |
width |
当前输入框宽度 |
number |
35 |
steps |
步进数 |
number |
1 |
fillable |
是否可填写 |
boolean |
true |
buttonType |
按钮样式,可选[box/circle] |
string |
box |
disabled |
禁用 |
boolean |
false |
Event 事件
事件名 |
说明 |
参数 |
onChange |
改变值后的回调 |
e.detail.value |
Slot 插槽
Class 自定义类名