<template>
|
<ChooseInput :modelValue="inputValue" @click="handleOpen()"></ChooseInput>
|
</template>
|
|
<script setup lang="ts">
|
import { useAllAreaList } from '@12333/hooks';
|
import { Portal } from 'senin-mini/components';
|
import ChooseAreaActionSheet from '../ActionSheet/ChooseAreaActionSheet.vue';
|
import ChooseInput from './ChooseInput.vue';
|
import { computed, h } from 'vue';
|
|
defineOptions({
|
name: 'ChooseInputWithAreaSheet',
|
});
|
|
const { findAreaNameFromCode } = useAllAreaList();
|
|
type Props = {
|
modelValue: Array<number>;
|
title?: string;
|
max?: number;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
title: '请选择地区',
|
});
|
const inputValue = computed(() =>
|
props.modelValue.map((x) => findAreaNameFromCode(Number(x))).join(',')
|
);
|
|
const emit = defineEmits<{
|
(e: 'update:modelValue', val: Array<string | number>): void;
|
}>();
|
|
function handleOpen() {
|
Portal.add((key) => {
|
return h(
|
Portal.Container,
|
{ keyNumber: key, delayOpen: true },
|
{
|
default: ({ open, onClose }) =>
|
h(ChooseAreaActionSheet, {
|
modelValue: props.modelValue,
|
max: props.max,
|
visible: open.value,
|
'onUpdate:visible': (value) => !value && onClose(),
|
title: props.title,
|
'onUpdate:modelValue': (value) => {
|
emit('update:modelValue', value);
|
},
|
}),
|
}
|
);
|
});
|
}
|
</script>
|
