| | |
| | | <template> |
| | | <ChooseInput :modelValue="inputValue" @click="handleOpen()"></ChooseInput> |
| | | <ChooseInput :modelValue="inputValue" @click="handleOpen()" v-bind="$attrs"></ChooseInput> |
| | | <Popup v-model:visible="popupVisible" position="bottom"> |
| | | <Picker |
| | | :modelValue="[modelValue]" |
| | | :columns="options" |
| | | @cancel="popupVisible = false" |
| | | @confirm="handleConfirm" |
| | | ></Picker> |
| | | </Popup> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import ChooseInput from './ChooseInput.vue'; |
| | | import { Popup, Picker } from '@nutui/nutui-taro'; |
| | | import { convertOptions, ValueEnum } from 'senin-mini/utils'; |
| | | import { Portal } from 'senin-mini/components'; |
| | | import { computed, h } from 'vue'; |
| | | import { computed, ref } from 'vue'; |
| | | |
| | | defineOptions({ |
| | | name: 'ChooseInputWithPicker', |
| | |
| | | () => options.value?.find((x) => x.value === props.modelValue)?.text ?? '' |
| | | ); |
| | | |
| | | function handleOpen() { |
| | | const _modelValue = [props.modelValue]; |
| | | Portal.add((key) => { |
| | | return h( |
| | | Portal.Container, |
| | | { keyNumber: key, delayOpen: true }, |
| | | { |
| | | default: ({ open, onClose }) => |
| | | h( |
| | | Popup, |
| | | { |
| | | visible: open.value, |
| | | 'onUpdate:visible': (value) => !value && onClose(), |
| | | position: 'bottom', |
| | | }, |
| | | { |
| | | default: () => |
| | | h(Picker, { |
| | | modelValue: _modelValue, |
| | | columns: options.value, |
| | | onCancel: onClose, |
| | | onConfirm: ({ selectedValue, selectedOptions }) => { |
| | | console.log('selectedValue: ', selectedValue, selectedOptions); |
| | | const popupVisible = ref(false); |
| | | |
| | | function handleConfirm({ selectedValue, selectedOptions }) { |
| | | emit('update:modelValue', selectedOptions[0].value); |
| | | onClose(); |
| | | }, |
| | | }), |
| | | popupVisible.value = false; |
| | | } |
| | | ), |
| | | } |
| | | ); |
| | | }); |
| | | |
| | | function handleOpen() { |
| | | popupVisible.value = true; |
| | | } |
| | | </script> |