小程序底部公用选择组件van-picker,根据type 类型区分,填充不同的columns

21 阅读1分钟
<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)
		},
	}
})
<!-- 底部公用选择组件,根据type 类型区分,填充不同的columns -->
<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
		})
	},