@xiaohaih/json-form-vant 0.0.1

package/components/input-slot/index.vue

@@ -0,0 +1,148 @@
+<template>
+    <textarea v-if="type === 'textarea'" ref="inputRef" v-bind="inputAttrs" @focus="focusHandle" @blur="blurHandle" @keypress="keypressHandle" />
+    <input v-else ref="inputRef" v-bind="inputAttrs" @focus="focusHandle" @blur="blurHandle" @keypress="keypressHandle">
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, nextTick, ref } from 'vue';
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import { inputSlotEmits as emits, inputSlotProps as props } from './types';
+
+/**
+ * @file 输入框 - 该组件提供 vant 输入框的样式, 便于覆盖 Field.input 插槽
+ */
+export default defineComponent({
+    name: 'HInputSlot',
+    components: { },
+    inheritAttrs: false,
+    props,
+    emits,
+    setup(props, ctx) {
+        const id = '';
+        const inputRef = ref<ComponentExposed<typeof HTMLInputElement | typeof HTMLTextAreaElement>>();
+        const inputAttrs = computed(() => {
+            const { rows, label, disabled, readonly } = props;
+            return {
+                ...ctx.attrs,
+                'rows': rows !== undefined ? +rows : undefined,
+                'aria-labelledby': label ? `${id}-label` : undefined,
+                'data-allow-mismatch': 'attribute',
+                'class': 'van-field__control',
+                disabled,
+                readonly,
+                // onBlur,
+                // onFocus,
+                // onKeypress,
+            };
+        });
+
+        function blur() {
+            inputRef.value?.blur();
+        }
+        function focus() {
+            inputRef.value?.focus();
+        }
+        function focusHandle(event: Event) {
+            nextTick(adjustTextareaSize);
+            // readonly not work in legacy mobile safari
+            props.readonly && blur();
+        };
+        function blurHandle() {
+            if (props.readonly) return;
+            nextTick(adjustTextareaSize);
+            resetScroll();
+        }
+        function keypressHandle(event: KeyboardEvent) {
+            // const ENTER_CODE = 13;
+            // if (event.keyCode === ENTER_CODE) {
+            //     // trigger blur after click keyboard search button
+            //     props.type === 'search' && blur();
+            // }
+
+        };
+
+        const adjustTextareaSize = () => {
+            const input = inputRef.value;
+            if (props.type === 'textarea' && props.autosize && input) {
+                resizeTextarea(input as HTMLInputElement, props.autosize);
+            }
+        };
+        function resetScroll() {
+            if (isIOS_) {
+                setRootScrollTop(getRootScrollTop());
+            }
+        }
+
+        const inBrowser = typeof window !== 'undefined';
+        const isIOS = (): boolean =>
+            inBrowser
+                ? /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())
+                : false;
+        const isIOS_ = isIOS();
+        const isObject = (val: unknown): val is Record<any, any> =>
+            val !== null && typeof val === 'object';
+
+        function resizeTextarea(
+            input: HTMLInputElement,
+            autosize: true | {
+                maxHeight?: number;
+                minHeight?: number;
+            },
+        ) {
+            const scrollTop = getRootScrollTop();
+            input.style.height = 'auto';
+
+            let height = input.scrollHeight;
+            if (isObject(autosize)) {
+                const { maxHeight, minHeight } = autosize;
+                if (maxHeight !== undefined) {
+                    height = Math.min(height, maxHeight);
+                }
+                if (minHeight !== undefined) {
+                    height = Math.max(height, minHeight);
+                }
+            }
+
+            if (height) {
+                input.style.height = `${height}px`;
+                // https://github.com/vant-ui/vant/issues/9178
+                setRootScrollTop(scrollTop);
+            }
+        }
+
+        type ScrollElement = Element | Window;
+        function setScrollTop(el: ScrollElement, value: number) {
+            if ('scrollTop' in el) {
+                el.scrollTop = value;
+            }
+            else {
+                el.scrollTo(el.scrollX, value);
+            }
+        }
+
+        function getRootScrollTop(): number {
+            return (
+                window.pageYOffset
+                || document.documentElement.scrollTop
+                || document.body.scrollTop
+                || 0
+            );
+        }
+        function setRootScrollTop(value: number) {
+            setScrollTop(window, value);
+            setScrollTop(document.body, value);
+        }
+
+        return {
+            inputRef,
+            inputAttrs,
+            focusHandle,
+            blurHandle,
+            keypressHandle,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/input-slot/types.ts

@@ -0,0 +1,34 @@
+import type { Obj2Props, usePlain } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import type { Field as VanField } from 'vant';
+import type { ExtractPublicPropTypes, Prop, PropType } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+type VanFieldProps = Obj2Props<ComponentProps<typeof VanField>>;
+
+/** 组件传参 */
+export const inputSlotProps = {
+    ...{
+        // 这些属性不需要传到组件上
+        t: { type: String as PropType<string> },
+        rules: { type: [Array, Object] as PropType<any> },
+        name: { type: [String] as PropType<string> },
+    } as unknown as typeof VanField.props as unknown as VanFieldProps,
+    /** 输入框类型(input/textarea) */
+    type: { type: String } as unknown as VanFieldProps['type'],
+    /** 输入框行数 */
+    rows: { type: [Number, String] as PropType<number | string> },
+    /** 禁用 */
+    disabled: { type: [Boolean] as PropType<boolean> },
+    /** 只读 */
+    readonly: { type: [Boolean] as PropType<boolean> },
+    /** 文本信息 */
+    label: { type: [String] as PropType<string> },
+};
+export type InputSlotProps = ExtractPublicPropTypes<typeof inputSlotProps>;
+
+/** 组件事件 */
+export const inputSlotEmits = {
+};
+
+export type InputSlotEmits = typeof inputSlotEmits;

package/components/number-keyboard/index.ts

@@ -0,0 +1,6 @@
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import HNumberKeyboard from './index.vue';
+
+export { HNumberKeyboard };
+export type HNumberKeyboardInstance = ComponentExposed<typeof HNumberKeyboard>;
+export * from './types';

package/components/number-keyboard/index.vue

@@ -0,0 +1,81 @@
+<template>
+    <VanField
+        v-if="!hide"
+        :name="field"
+        :model-value="(checked as string)"
+        :disabled="globalDisabled || disabled"
+        :readonly="true" :is-link="isLink"
+        v-bind="$attrs"
+        @click.stop="clickHandle"
+    >
+        <template #extra>
+            <VanNumberKeyboard
+                :model-value="(checked as string)"
+                :show="popupInfo.visible"
+                v-bind="numberKeyboardProps" v-on="numberKeyboardOn"
+                @update:model-value="change" @blur="popupInfo.close"
+            >
+                <template v-for="(item, slotName) of numberKeyboardSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                    <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+                </template>
+            </VanNumberKeyboard>
+        </template>
+        <template v-for="(item, slotName) of slots" :key="slotName" #[hyphenate(slotName)]="row">
+            <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+        </template>
+    </VanField>
+</template>
+
+<script lang="ts">
+import { getNode, hyphenate, usePlain } from '@xiaohaih/json-form-core';
+import { Field as VanField, NumberKeyboard as VanNumberKeyboard } from 'vant';
+import type { SlotsType } from 'vue';
+import { defineComponent, ref } from 'vue';
+import { useCommonSetup } from '../use';
+import type { NumberKeyboardSlots } from './types';
+import { numberKeyboardEmitsPrivate as emits, numberKeyboardPropsPrivate as props } from './types';
+
+/**
+ * @file 数字键盘
+ */
+export default defineComponent({
+    name: 'HNumberKeyboard',
+    components: { VanField, VanNumberKeyboard },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<NumberKeyboardSlots>,
+    setup(props, ctx) {
+        const plain = usePlain(props);
+        const { slotProps } = useCommonSetup(props, ctx, plain);
+
+        /** 点击事件 */
+        function clickHandle(ev: MouseEvent) {
+            if (plain.globalDisabled.value || props.disabled || plain.globalReadonly.value || props.readonly) return;
+            props.onRowClick ? props.onRowClick(popupInfo.value, ev) : popupInfo.value.open();
+        }
+        /** 弹窗显示状态 */
+        const popupInfo = ref({
+            visible: false,
+            open() {
+                popupInfo.value.visible = true;
+            },
+            close() {
+                popupInfo.value.visible = false;
+            },
+        });
+
+        return {
+            hyphenate,
+            getNode,
+            ...plain,
+            slotProps,
+            clickHandle,
+            popupInfo,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/number-keyboard/types.ts

@@ -0,0 +1,57 @@
+import type { emits2obj, PlainProps } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import { Field as VanField, NumberKeyboard as VanNumberKeyboard } from 'vant';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import type { CommonProps, CommonSlots, CommonSlotsProps, ComponentType } from '../share';
+import { commonProps } from '../share';
+
+/** 组件传参 - 私有 */
+export function numberKeyboardPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** VanNumberKeyboard 组件的属性 */
+        numberKeyboardProps: { type: Object as PropType<Partial<ComponentProps<typeof VanNumberKeyboard>>> },
+        /** VanNumberKeyboard 组件的事件 - 兼容 vue2 版本 */
+        numberKeyboardOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanNumberKeyboard.emits>>>>>, default: () => ({}) },
+        /** VanNumberKeyboard 组件的插槽 */
+        numberKeyboardSlots: { type: Object as PropType<{
+            /** 自定义删除按键内容 */
+            delete: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义左下角按键内容 */
+            extraKey: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义标题栏左侧内容 */
+            titleLeft: ComponentType<CommonSlotsProps<any, any>>;
+        }> },
+        /** 是否展示右侧箭头并开启点击反馈 - Field 字段, 调整默认值 */
+        isLink: { type: Boolean, default: true },
+        /** 点击事件, 当传递了此事件时, 会忽略内部打开弹窗操作 */
+        onRowClick: { type: Function as PropType<(option: { open: () => void; close: () => void }, ev: MouseEvent) => void> },
+    } as const;
+}
+/** 组件传参 - 私有 */
+export const numberKeyboardPropsPrivate = numberKeyboardPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const numberKeyboardProps = {
+    ...VanField.props as unknown as {},
+    ...numberKeyboardPropsPrivate,
+};
+export type NumberKeyboardProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof numberKeyboardPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function numberKeyboardEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const numberKeyboardEmitsPrivate = numberKeyboardEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const numberKeyboardEmits = {
+    ...VanField.emits,
+    ...numberKeyboardEmitsPrivate,
+};
+
+export type NumberKeyboardEmits<T> = ReturnType<typeof numberKeyboardEmitsGeneric<T>>;
+
+export interface NumberKeyboardSlots extends CommonSlots<any> {
+}

package/components/password-input/index.ts

@@ -0,0 +1,6 @@
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import HPasswordInput from './index.vue';
+
+export { HPasswordInput };
+export type HPasswordInputInstance = ComponentExposed<typeof HPasswordInput>;
+export * from './types';

package/components/password-input/index.vue

@@ -0,0 +1,103 @@
+<template>
+    <VanField
+        v-if="!hide"
+        :name="field" :label="label"
+        :model-value="(checked as string)"
+        :disabled="globalDisabled || disabled"
+        :readonly="globalReadonly || readonly"
+        v-bind="$attrs"
+        @click.stop="clickHandle"
+    >
+        <template #input>
+            <VanPasswordInput
+                style="width: 100%"
+                :value="(checked as string)"
+                :focused="popupInfo.visible"
+                v-bind="passwordInputProps" v-on="passwordInputOn"
+                @focus="clickHandle"
+            >
+                <template v-for="(item, slotName) of passwordInputSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                    <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+                </template>
+            </VanPasswordInput>
+        </template>
+        <template #extra>
+            <VanNumberKeyboard
+                :model-value="(checked as string)"
+                :show="popupInfo.visible"
+                v-bind="numberKeyboardProps"
+                v-on="numberKeyboardOn"
+                @update:model-value="customChange"
+                @blur="popupInfo.close"
+            >
+                <template v-for="(item, slotName) of numberKeyboardSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                    <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+                </template>
+            </VanNumberKeyboard>
+        </template>
+        <template v-for="(item, slotName) of slots" :key="slotName" #[hyphenate(slotName)]="row">
+            <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+        </template>
+    </VanField>
+</template>
+
+<script lang="ts">
+import { getNode, hyphenate, usePlain } from '@xiaohaih/json-form-core';
+import { Field as VanField, NumberKeyboard as VanNumberKeyboard, PasswordInput as VanPasswordInput } from 'vant';
+import type { SlotsType } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
+import { useCommonSetup } from '../use';
+import type { PasswordInputSlots } from './types';
+import { passwordInputEmitsPrivate as emits, passwordInputPropsPrivate as props } from './types';
+
+/**
+ * @file 密码输入框
+ */
+export default defineComponent({
+    name: 'HPasswordInput',
+    components: { VanField, VanNumberKeyboard, VanPasswordInput },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<PasswordInputSlots>,
+    setup(props, ctx) {
+        const plain = usePlain(props);
+        const { slotProps } = useCommonSetup(props, ctx, plain);
+
+        /** 点击事件 */
+        function clickHandle(ev: MouseEvent) {
+            if (plain.globalDisabled.value || props.disabled || plain.globalReadonly.value || props.readonly) return;
+            props.onRowClick ? props.onRowClick(popupInfo.value, ev) : popupInfo.value.open();
+        }
+        /** 重写 change 事件 */
+        function customChange(value: string) {
+            const len = Number(props.passwordInputProps?.length) || 6;
+            if (value.length === len) popupInfo.value.close();
+            plain.change(value);
+        }
+        /** 弹窗显示状态 */
+        const popupInfo = ref({
+            visible: false,
+            open() {
+                popupInfo.value.visible = true;
+            },
+            close() {
+                popupInfo.value.visible = false;
+            },
+        });
+
+        return {
+            hyphenate,
+            getNode,
+            ...plain,
+            slotProps,
+            clickHandle,
+            customChange,
+            popupInfo,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/password-input/types.ts

@@ -0,0 +1,64 @@
+import type { emits2obj, PlainProps } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import { Field as VanField, NumberKeyboard as VanNumberKeyboard, PasswordInput as VanPasswordInput } from 'vant';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import type { CommonProps, CommonSlots, CommonSlotsProps, ComponentType } from '../share';
+import { commonProps } from '../share';
+
+/** 组件传参 - 私有 */
+export function passwordInputPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** 输入框左侧文本 */
+        label: { type: String },
+        /** VanPasswordInput 组件的属性 */
+        passwordInputProps: { type: Object as PropType<Partial<ComponentProps<typeof VanPasswordInput>>> },
+        /** VanPasswordInput 组件的事件 - 兼容 vue2 版本 */
+        passwordInputOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanPasswordInput.emits>>>>>, default: () => ({}) },
+        /** VanPasswordInput 组件的插槽 */
+        passwordInputSlots: { type: Object as PropType<{
+        }> },
+        /** 点击事件, 当传递了此事件时, 会忽略内部打开弹窗操作 */
+        onRowClick: { type: Function as PropType<(option: { open: () => void; close: () => void }, ev: MouseEvent) => void> },
+        /** VanNumberKeyboard 组件的属性 */
+        numberKeyboardProps: { type: Object as PropType<Partial<ComponentProps<typeof VanNumberKeyboard>>> },
+        /** VanNumberKeyboard 组件的事件 - 兼容 vue2 版本 */
+        numberKeyboardOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanNumberKeyboard.emits>>>>>, default: () => ({}) },
+        /** VanNumberKeyboard 组件的插槽 */
+        numberKeyboardSlots: { type: Object as PropType<{
+            /** 自定义删除按键内容 */
+            delete: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义左下角按键内容 */
+            extraKey: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义标题栏左侧内容 */
+            titleLeft: ComponentType<CommonSlotsProps<any, any>>;
+        }> },
+    } as const;
+}
+/** 组件传参 - 私有 */
+export const passwordInputPropsPrivate = passwordInputPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const passwordInputProps = {
+    ...VanField.props as unknown as {},
+    ...passwordInputPropsPrivate,
+};
+export type PasswordInputProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof passwordInputPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function passwordInputEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const passwordInputEmitsPrivate = passwordInputEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const passwordInputEmits = {
+    ...VanField.emits,
+    ...passwordInputEmitsPrivate,
+};
+
+export type PasswordInputEmits<T> = ReturnType<typeof passwordInputEmitsGeneric<T>>;
+
+export interface PasswordInputSlots extends CommonSlots<any> {
+}

package/components/picker/index.ts

@@ -0,0 +1,6 @@
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import HPicker from './index.vue';
+
+export { HPicker };
+export type HPickerInstance = ComponentExposed<typeof HPicker>;
+export * from './types';

package/components/picker/index.vue

@@ -0,0 +1,136 @@
+<template>
+    <VanField
+        v-if="!hide"
+        :name="field"
+        :disabled="globalDisabled || disabled"
+        :readonly="true"
+        :is-link="isLink"
+        :model-value="showText"
+        v-bind="$attrs"
+        @click="clickHandle"
+    >
+        <template #extra>
+            <VanPopup v-model:show="popupInfo.visible" teleport="body" round position="bottom" v-bind="popupProps" v-on="popupOn" @close="popupInfo.close">
+                <VanPicker
+                    :model-value="checked"
+                    :columns="finalOption"
+                    v-bind="pickerProps" v-on="pickerOn"
+                    @change="pickerHandle('change', $event)" @confirm="pickerHandle('confirm', $event)" @cancel="pickerHandle('cancel', $event)"
+                >
+                    <template v-for="(item, slotName) of pickerSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                        <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+                    </template>
+                </VanPicker>
+            </VanPopup>
+        </template>
+        <template v-for="(item, slotName) of slots" :key="slotName" #[hyphenate(slotName)]="row">
+            <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+        </template>
+    </VanField>
+</template>
+
+<script lang="ts">
+import { getNode, hyphenate, usePlain } from '@xiaohaih/json-form-core';
+import { Field as VanField, Picker as VanPicker, Popup as VanPopup } from 'vant';
+import type { SlotsType } from 'vue';
+import { computed, defineComponent, ref, watch } from 'vue';
+import { useCommonSetup } from '../use';
+import type { PickerOption, PickerSlots } from './types';
+import { pickerEmitsPrivate as emits, pickerPropsPrivate as props } from './types';
+
+/**
+ * @file 选择框
+ */
+export default defineComponent({
+    name: 'HPicker',
+    components: { VanPicker, VanField, VanPopup },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<PickerSlots>,
+    setup(props, ctx) {
+        const plain = usePlain(props);
+        const { slotProps } = useCommonSetup(props, ctx, plain);
+        /** 展示在页面上的值 */
+        const showText = computed(() => {
+            const value = plain.checked.value as string[];
+            if (!value || !value.length) return '';
+            const { format, showAllLevels, separator } = props;
+            const source = (props.pickerProps?.columns || plain.finalOption.value) as Record<string, any>[];
+            const _columnsFieldNames = (props.pickerProps || {}).columnsFieldNames || {};
+            const columnsFieldNames = { text: _columnsFieldNames.text || 'text', value: _columnsFieldNames.value || 'value', children: _columnsFieldNames.children || 'children' };
+            if (format) return format({ source, value, columnsFieldNames, showAllLevels, separator });
+
+            // 判断是否为扁平多列结构（source 中的元素是数组）
+            const isMultiColumnFlat = source.length > 0 && Array.isArray(source[0]);
+
+            if (isMultiColumnFlat) {
+                // 1. 扁平的多列：每列独立查找
+                return value.map((val, i) => {
+                    const column = source[i] || [];
+                    const item = column.find((opt: Record<string, any>) => opt[columnsFieldNames.value] === val);
+                    return item ? item[columnsFieldNames.text] : '';
+                }).filter(Boolean).join(separator);
+            }
+            // 2. 树形级联或单列：逐级查找
+            const texts: string[] = [];
+            let currentOptions = source;
+            for (const val of value) {
+                const item = currentOptions.find((opt: Record<string, any>) => opt[columnsFieldNames.value] === val);
+                if (!item) break;
+                texts.push(item[columnsFieldNames.text]);
+                currentOptions = item[columnsFieldNames.children] || [];
+            }
+            return showAllLevels ? texts.join(separator) : texts[texts.length - 1];
+        });
+
+        /** 点击事件 */
+        function clickHandle(ev: MouseEvent) {
+            if (plain.globalDisabled.value || props.disabled || plain.globalReadonly.value || props.readonly) return;
+            props.onRowClick ? props.onRowClick(popupInfo.value, ev) : popupInfo.value.open();
+        }
+        /**
+         * 日期更改事件
+         * @param {string} type 事件类型
+         * @param {string} value 日期值
+         */
+        function pickerHandle(type: string, value: PickerOption) {
+            (props.valueTrigger === type || props.pickerProps?.showToolbar === false) && plain.change(value.selectedValues);
+            switch (type) {
+                case 'confirm':
+                case 'cancel':
+                {
+                    popupInfo.value.close();
+                    break;
+                }
+                default: break;
+            }
+        }
+
+        /** 弹窗显示状态 */
+        const popupInfo = ref({
+            visible: false,
+            open() {
+                popupInfo.value.visible = true;
+            },
+            close() {
+                popupInfo.value.visible = false;
+            },
+        });
+
+        return {
+            hyphenate,
+            getNode,
+            ...plain,
+            slotProps,
+            showText,
+            clickHandle,
+            pickerHandle,
+            popupInfo,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>