Picker ​

<script setup>
	
	import * as plus from '@/uni_modules/ux-plus'
	import { UxPickerData, UxPickerEvent } from '@/uni_modules/ux-frame'
	
	const title = ref('')
	const isOk = ref(false)
	
	const data = ref<UTSJSONObject>({
		v1: [1],
		v2: [1, 2],
		v3: [1, 2, 3],
		v4: [0, 1],
		v5: [0, 2],
		v6: [0, 3],
		v7: [0, 2, 4],
		v8: [0, 5]
	})
	const value1 = ref('')
	const value2 = ref('')
	const value3 = ref('')
	const value4 = ref('')
	const value5 = ref('')
	const value6 = ref('')
	const value7 = ref('')
	
	const data1 = [
		[{
			name: '橘子',
			value: '橘子'
		}, {
			name: '香蕉',
			value: '香蕉'
		}, {
			name: '苹果',
			value: '苹果'
		}, {
			name: '梨子',
			value: '梨子'
		}, {
			name: '桃子',
			value: '桃子'
		}, {
			name: '西瓜',
			value: '西瓜'
		}] as UxPickerData[]
	] as UxPickerData[][]
	
	const data2 = [
		[{
			name: '橘子',
			value: '橘子'
		}, {
			name: '香蕉',
			value: '香蕉'
		}, {
			name: '苹果',
			value: '苹果'
		}, {
			name: '梨子',
			value: '梨子'
		}, {
			name: '桃子',
			value: '桃子'
		}, {
			name: '西瓜',
			value: '西瓜'
		}] as UxPickerData[],
		[{
			name: '1个',
			value: '0'
		}, {
			name: '2个',
			value: '1'
		}, {
			name: '3个',
			value: '2'
		}, {
			name: '4个',
			value: '3'
		}, {
			name: '5个',
			value: '4'
		}, {
			name: '6个',
			value: '5'
		}] as UxPickerData[]
	] as UxPickerData[][]
	
	const data3 = [
		[{
			name: '橘子',
			value: '橘子'
		}, {
			name: '香蕉',
			value: '香蕉'
		}, {
			name: '苹果',
			value: '苹果'
		}, {
			name: '梨子',
			value: '梨子'
		}, {
			name: '桃子',
			value: '桃子'
		}, {
			name: '西瓜',
			value: '西瓜'
		}] as UxPickerData[],
		[{
			name: '1个',
			value: '0'
		}, {
			name: '2个',
			value: '1'
		}, {
			name: '3个',
			value: '2'
		}, {
			name: '4个',
			value: '3'
		}, {
			name: '5个',
			value: '4'
		}, {
			name: '6个',
			value: '5'
		}] as UxPickerData[],
		[{
			name: '1元',
			value: '0'
		}, {
			name: '2元',
			value: '1'
		}, {
			name: '3元',
			value: '2'
		}, {
			name: '4元',
			value: '3'
		}, {
			name: '5元',
			value: '4'
		}, {
			name: '6元',
			value: '5'
		}] as UxPickerData[]
	] as UxPickerData[][]
	
	const data4 = [
		[{
			name: '橘子',
			value: '橘子',
			children: [{
				name: '1个',
				value: '0',
				children: [{
					name: '1元',
					value: '0'
				}, {
					name: '2元',
					value: '1'
				}, {
					name: '3元',
					value: '2'
				}, {
					name: '4元',
					value: '3'
				}, {
					name: '5元',
					value: '4'
				}, {
					name: '6元',
					value: '5'
				}] as UxPickerData[]
			}, {
				name: '2个',
				value: '1',
				children: [{
					name: '1元',
					value: '0'
				}, {
					name: '2元',
					value: '1'
				}, {
					name: '3元',
					value: '2'
				}, {
					name: '4元',
					value: '3'
				}, {
					name: '5元',
					value: '4'
				}, {
					name: '6元',
					value: '5'
				}] as UxPickerData[]
			}, {
				name: '3个',
				value: '2',
				children: [{
					name: '1元',
					value: '0'
				}, {
					name: '2元',
					value: '1'
				}, {
					name: '3元',
					value: '2'
				}, {
					name: '4元',
					value: '3'
				}, {
					name: '5元',
					value: '4'
				}, {
					name: '6元',
					value: '5'
				}] as UxPickerData[]
			}, {
				name: '4个',
				value: '3',
				children: [{
					name: '1元',
					value: '0'
				}, {
					name: '2元',
					value: '1'
				}, {
					name: '3元',
					value: '2'
				}, {
					name: '4元',
					value: '3'
				}, {
					name: '5元',
					value: '4'
				}, {
					name: '6元',
					value: '5'
				}] as UxPickerData[]
			}, {
				name: '5个',
				value: '4',
				children: [{
					name: '1元',
					value: '0'
				}, {
					name: '2元',
					value: '1'
				}, {
					name: '3元',
					value: '2'
				}, {
					name: '4元',
					value: '3'
				}, {
					name: '5元',
					value: '4'
				}, {
					name: '6元',
					value: '5'
				}] as UxPickerData[]
			}, {
				name: '6个',
				value: '5'
			}] as UxPickerData[]
		}, {
			name: '香蕉',
			value: '香蕉',
			children: [{
				name: '1个',
				value: '0'
			}, {
				name: '2个',
				value: '1'
			}, {
				name: '3个',
				value: '2'
			}, {
				name: '4个',
				value: '3'
			}, {
				name: '5个',
				value: '4'
			}, {
				name: '6个',
				value: '5'
			}] as UxPickerData[]
		}, {
			name: '苹果',
			value: '苹果',
			children: [{
				name: '1个',
				value: '0'
			}, {
				name: '2个',
				value: '1'
			}, {
				name: '3个',
				value: '2'
			}, {
				name: '4个',
				value: '3'
			}, {
				name: '5个',
				value: '4'
			}, {
				name: '6个',
				value: '5'
			}] as UxPickerData[]
		}, {
			name: '梨子',
			value: '梨子',
			children: [{
				name: '1个',
				value: '0'
			}, {
				name: '2个',
				value: '1'
			}, {
				name: '3个',
				value: '2'
			}, {
				name: '4个',
				value: '3'
			}, {
				name: '5个',
				value: '4'
			}, {
				name: '6个',
				value: '5'
			}] as UxPickerData[]
		}, {
			name: '桃子',
			value: '桃子',
			children: [{
				name: '1个',
				value: '0'
			}, {
				name: '2个',
				value: '1'
			}, {
				name: '3个',
				value: '2'
			}, {
				name: '4个',
				value: '3'
			}, {
				name: '5个',
				value: '4'
			}, {
				name: '6个',
				value: '5'
			}] as UxPickerData[]
		}, {
			name: '西瓜',
			value: '西瓜',
			children: [{
				name: '1个',
				value: '0'
			}, {
				name: '2个',
				value: '1'
			}, {
				name: '3个',
				value: '2'
			}, {
				name: '4个',
				value: '3'
			}, {
				name: '5个',
				value: '4'
			}, {
				name: '6个',
				value: '5'
			}] as UxPickerData[]
		}] as UxPickerData[]
	] as UxPickerData[][]
	
	onLoad((e : OnLoadOptions) => {
		title.value = e['title'] ?? ''
		
		setTimeout(function() {
			isOk.value = true
		}, 100);
	})
	
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/picker.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	function change1(e : UxPickerEvent) {
		value1.value = e.label.join('-')
	}
	
	function change2(e : UxPickerEvent) {
		value2.value = e.label.join('_')
	}

	function change3(e : UxPickerEvent) {
		value3.value = e.label.join(':')
	}
	
	function change4(e : UxPickerEvent) {
		value4.value = e.label.join(' ')
	}
	
	function change5(e : UxPickerEvent) {
		value5.value = e.label.join('/')
	}
	
	function change6(e : UxPickerEvent) {
		value6.value = e.label.join('/')
	}
	
	function change7(e : UxPickerEvent) {
		value7.value = e.label.join('/')
	}
	
</script>

<script setup>
	
	import * as plus from '@/uni_modules/ux-plus'
	import { UxPickerData, UxPickerEvent } from '@/uni_modules/ux-frame'
	
	const title = ref('')
	const isOk = ref(false)
	
	const data = ref<UTSJSONObject>({
		v1: [1],
		v2: [1, 2],
		v3: [1, 2, 3],
		v4: [0, 1],
		v5: [0, 2],
		v6: [0, 3],
		v7: [0, 2, 4],
		v8: [0, 5]
	})
	const value1 = ref('')
	const value2 = ref('')
	const value3 = ref('')
	const value4 = ref('')
	const value5 = ref('')
	const value6 = ref('')
	const value7 = ref('')
	
	const data1 = [
		[{
			name: '橘子',
			value: '橘子'
		}, {
			name: '香蕉',
			value: '香蕉'
		}, {
			name: '苹果',
			value: '苹果'
		}, {
			name: '梨子',
			value: '梨子'
		}, {
			name: '桃子',
			value: '桃子'
		}, {
			name: '西瓜',
			value: '西瓜'
		}] as UxPickerData[]
	] as UxPickerData[][]
	
	const data2 = [
		[{
			name: '橘子',
			value: '橘子'
		}, {
			name: '香蕉',
			value: '香蕉'
		}, {
			name: '苹果',
			value: '苹果'
		}, {
			name: '梨子',
			value: '梨子'
		}, {
			name: '桃子',
			value: '桃子'
		}, {
			name: '西瓜',
			value: '西瓜'
		}] as UxPickerData[],
		[{
			name: '1个',
			value: '0'
		}, {
			name: '2个',
			value: '1'
		}, {
			name: '3个',
			value: '2'
		}, {
			name: '4个',
			value: '3'
		}, {
			name: '5个',
			value: '4'
		}, {
			name: '6个',
			value: '5'
		}] as UxPickerData[]
	] as UxPickerData[][]
	
	const data3 = [
		[{
			name: '橘子',
			value: '橘子'
		}, {
			name: '香蕉',
			value: '香蕉'
		}, {
			name: '苹果',
			value: '苹果'
		}, {
			name: '梨子',
			value: '梨子'
		}, {
			name: '桃子',
			value: '桃子'
		}, {
			name: '西瓜',
			value: '西瓜'
		}] as UxPickerData[],
		[{
			name: '1个',
			value: '0'
		}, {
			name: '2个',
			value: '1'
		}, {
			name: '3个',
			value: '2'
		}, {
			name: '4个',
			value: '3'
		}, {
			name: '5个',
			value: '4'
		}, {
			name: '6个',
			value: '5'
		}] as UxPickerData[],
		[{
			name: '1元',
			value: '0'
		}, {
			name: '2元',
			value: '1'
		}, {
			name: '3元',
			value: '2'
		}, {
			name: '4元',
			value: '3'
		}, {
			name: '5元',
			value: '4'
		}, {
			name: '6元',
			value: '5'
		}] as UxPickerData[]
	] as UxPickerData[][]
	
	const data4 = [
		[{
			name: '橘子',
			value: '橘子',
			children: [{
				name: '1个',
				value: '0',
				children: [{
					name: '1元',
					value: '0'
				}, {
					name: '2元',
					value: '1'
				}, {
					name: '3元',
					value: '2'
				}, {
					name: '4元',
					value: '3'
				}, {
					name: '5元',
					value: '4'
				}, {
					name: '6元',
					value: '5'
				}] as UxPickerData[]
			}, {
				name: '2个',
				value: '1',
				children: [{
					name: '1元',
					value: '0'
				}, {
					name: '2元',
					value: '1'
				}, {
					name: '3元',
					value: '2'
				}, {
					name: '4元',
					value: '3'
				}, {
					name: '5元',
					value: '4'
				}, {
					name: '6元',
					value: '5'
				}] as UxPickerData[]
			}, {
				name: '3个',
				value: '2',
				children: [{
					name: '1元',
					value: '0'
				}, {
					name: '2元',
					value: '1'
				}, {
					name: '3元',
					value: '2'
				}, {
					name: '4元',
					value: '3'
				}, {
					name: '5元',
					value: '4'
				}, {
					name: '6元',
					value: '5'
				}] as UxPickerData[]
			}, {
				name: '4个',
				value: '3',
				children: [{
					name: '1元',
					value: '0'
				}, {
					name: '2元',
					value: '1'
				}, {
					name: '3元',
					value: '2'
				}, {
					name: '4元',
					value: '3'
				}, {
					name: '5元',
					value: '4'
				}, {
					name: '6元',
					value: '5'
				}] as UxPickerData[]
			}, {
				name: '5个',
				value: '4',
				children: [{
					name: '1元',
					value: '0'
				}, {
					name: '2元',
					value: '1'
				}, {
					name: '3元',
					value: '2'
				}, {
					name: '4元',
					value: '3'
				}, {
					name: '5元',
					value: '4'
				}, {
					name: '6元',
					value: '5'
				}] as UxPickerData[]
			}, {
				name: '6个',
				value: '5'
			}] as UxPickerData[]
		}, {
			name: '香蕉',
			value: '香蕉',
			children: [{
				name: '1个',
				value: '0'
			}, {
				name: '2个',
				value: '1'
			}, {
				name: '3个',
				value: '2'
			}, {
				name: '4个',
				value: '3'
			}, {
				name: '5个',
				value: '4'
			}, {
				name: '6个',
				value: '5'
			}] as UxPickerData[]
		}, {
			name: '苹果',
			value: '苹果',
			children: [{
				name: '1个',
				value: '0'
			}, {
				name: '2个',
				value: '1'
			}, {
				name: '3个',
				value: '2'
			}, {
				name: '4个',
				value: '3'
			}, {
				name: '5个',
				value: '4'
			}, {
				name: '6个',
				value: '5'
			}] as UxPickerData[]
		}, {
			name: '梨子',
			value: '梨子',
			children: [{
				name: '1个',
				value: '0'
			}, {
				name: '2个',
				value: '1'
			}, {
				name: '3个',
				value: '2'
			}, {
				name: '4个',
				value: '3'
			}, {
				name: '5个',
				value: '4'
			}, {
				name: '6个',
				value: '5'
			}] as UxPickerData[]
		}, {
			name: '桃子',
			value: '桃子',
			children: [{
				name: '1个',
				value: '0'
			}, {
				name: '2个',
				value: '1'
			}, {
				name: '3个',
				value: '2'
			}, {
				name: '4个',
				value: '3'
			}, {
				name: '5个',
				value: '4'
			}, {
				name: '6个',
				value: '5'
			}] as UxPickerData[]
		}, {
			name: '西瓜',
			value: '西瓜',
			children: [{
				name: '1个',
				value: '0'
			}, {
				name: '2个',
				value: '1'
			}, {
				name: '3个',
				value: '2'
			}, {
				name: '4个',
				value: '3'
			}, {
				name: '5个',
				value: '4'
			}, {
				name: '6个',
				value: '5'
			}] as UxPickerData[]
		}] as UxPickerData[]
	] as UxPickerData[][]
	
	onLoad((e : OnLoadOptions) => {
		title.value = e['title'] ?? ''
		
		setTimeout(function() {
			isOk.value = true
		}, 100);
	})
	
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/picker.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	function change1(e : UxPickerEvent) {
		value1.value = e.label.join('-')
	}
	
	function change2(e : UxPickerEvent) {
		value2.value = e.label.join('_')
	}

	function change3(e : UxPickerEvent) {
		value3.value = e.label.join(':')
	}
	
	function change4(e : UxPickerEvent) {
		value4.value = e.label.join(' ')
	}
	
	function change5(e : UxPickerEvent) {
		value5.value = e.label.join('/')
	}
	
	function change6(e : UxPickerEvent) {
		value6.value = e.label.join('/')
	}
	
	function change7(e : UxPickerEvent) {
		value7.value = e.label.join('/')
	}
	
</script>