fix: 修改ui

zhengyiming

2 天以前 2525f53411b131ecb9926409a523f0e44df6d20c

 packages/components/src/components/Input/ChooseInputWithPicker.vue

@@ -1,13 +1,20 @@
<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',
@@ -37,37 +44,14 @@
  () => options.value?.find((x) => x.value === props.modelValue)?.text ?? ''
);

const popupVisible = ref(false);

function handleConfirm({ selectedValue, selectedOptions }) {
  emit('update:modelValue', selectedOptions[0].value);
  popupVisible.value = false;
}

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);
                    emit('update:modelValue', selectedOptions[0].value);
                    onClose();
                  },
                }),
            }
          ),
      }
    );
  });
  popupVisible.value = true;
}
</script>