switch 开关
引入
全局引入,在 miniprogram 根目录下的app.json
中配置,局部引入,在需要引入的页面或组件的index.json
中配置。
// app.json 或 index.json
"usingComponents": {
"wr-switch": "@retailwe/ui-switch/index"
}
代码演示
<wr-switch
value="{{value}}"
min="{{min}}"
max="{{max}}"
bind:minus="handleMinus"
bind:plus="handlePlus"
bind:overlimit="handleOverlimit"
bind:blur="handleBlur"
></wr-switch>
Page({
data: {
disabled: false,
min: 3,
max: 10,
value: 4,
},
handleMinus: function(e) {
this.setData({
value: e.detail.value,
});
},
handlePlus: function(e) {
this.setData({
value: e.detail.value,
});
},
handleOverlimit: function() {
console.log('当前数量不符合规范');
},
handleBlur: function(e) {
this.setData({
value: e.detail.value,
});
},
});
switch Props
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
iClass | 自定义 class 类名 | string | - | - |
disabled | 是否禁用 | boolean | false | - |
color | 自定义颜色 | string | - | - |
size | 大小,有效值:s , m , l
|
string | l |
- |
checked | 是否选中 | boolean | false | - |
switch Event
事件名 | 说明 | 参数 |
---|---|---|
change | 组件改变时触发 | - |