// filter-control组件wxml
<view class="filter-control">
<text class="filter-control-label">{{label}}:</text>
<slot></slot>
</view>
// filter-control组件js
Component({
properties: {
label: String,
}
})
// select组件wxml
<picker
class="select"
value="{{value}}"
range="{{options}}"
range-key="label"
>
<view class="select-label">{{label}}</view>
</picker>
// select组件js
Component({
properties: {
value: {
type: String,
optionalTypes: [String, Number],
value: '',
},
options: {
type: Array,
value: [],
},
},
data: {
label: '',
},
observers: {
value(v) {
const { options } = this.data;
const item = options.find(opt => opt.value === v);
this.setData({ label: item ? item.label : '' });
}
},
});
// page wxml
<filter-control label="店铺状态">
<select
value="{{0}}"
options="{{[{label: '全部',value:0},{label: '开启',value:1},{label: '关闭',value: 2}]}}"
/>
</filter-control>
filter-control中的slot为select,在工具中节点的结构有问题:
在真机上正确渲染
麻烦提供能复现问题的代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html