<van-popup show="{{ isShow }}" round position="bottom" custom-style="van-popup" bind:close="onClose" bind:click-overlay="HandleClickOverlay">
<van-picker show-toolbar columns="{{ columns }}" value-key="{{label}}" bind:change="onChange" bind:confirm="onConfirm" bind:cancel="onCancel" data-type="{{type}}"/>
<!-- 自定义部分 -->
<slot name="user-defined"></slot>
</van-popup>
Component({
options: {
multipleSlots: true,
styleIsolation: 'apply-shared'
},
/**
* 组件的属性列表
*/
properties: {
// 是否显示
isShow: {
type: Boolean,
value: false
},
//类型,根据类型区分
type: {
type: String,
value: ''
},
//显示标签label
label: {
type: String,
value: 'label'
},
//数据内容
columns: {
type: Array,
value: []
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
// 点击遮罩层时触发
HandleClickOverlay() {
this.setData({
isShow: false
})
},
//确定
onConfirm(event) {
// Toast(`当前值:${value}, 当前索引:${index}`);
let type = this.properties.type
console.log("0000>" + type);
const { picker, value, index } = event.detail;
var myEventDetail = {
picker,
type,
value,
index
} // detail对象,提供给事件监听函数
this.triggerEvent('onConfirmFn', myEventDetail)
},
//取消
onCancel(event) {
let type = this.properties.type
const { picker, value, index } = event.detail;
var myEventDetail = {
picker,
type,
value,
index
} // detail对象,提供给事件监听函数
this.triggerEvent('onCancelFn', myEventDetail)
},
onChange(event) {
let type = this.properties.type
const { picker, value, index } = event.detail;
var myEventDetail = {
picker,
type,
value,
index
} // detail对象,提供给事件监听函数
this.triggerEvent('onChangeFn', myEventDetail)
},
}
})
<SelectPopup isShow="{{isShow}}" type="{{type}}" label="{{label}}" columns="{{columns}}" bind:onConfirmFn="handleSelectConfirm" bind:onCancelFn="handleSelectonCancel">
</SelectPopup>
showSelectDialog()
{
this.data.INCOMING_APP_LIST = newDataArray
this.setData({
isShow: true,
label: 'label',
type: 'INCOMING_APP_LIST',
columns: INCOMING_APP_LIST,
})
}
handleSelectonCancel(e) {
this.setData({
isShow: false,
type: '',
columns: [],
})
},
handleSelectConfirm(e) {
console.log(e);
const { type, value, index } = e.detail;
console.log(type + `:当前值:${value.value}, 当前索引:${index}`);
if (type == 'INCOMING_APP_LIST')
{
this.resetItemList('itemList1', 4, value.label, value.value)
}
this.setData({
isShow: false
})
},