sard-uniapp/components/action-sheet/context.js

sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库

import { provide, inject, onMounted, onUnmounted, useAttrs, ref, } from 'vue';
import { reactiveComputed } from '../../use';
export const actionSheetContextKey = Symbol('ActionSheetContext');
export function useActionSheet() {
    const items = ref([]);
    let selectCallback = null;
    const setSelectCallback = (callback) => {
        selectCallback = callback;
    };
    provide(actionSheetContextKey, {
        select: (item) => {
            const index = items.value.indexOf(item);
            selectCallback?.(item, index);
        },
        addItem: (item) => {
            if (!items.value.includes(item)) {
                items.value.push(item);
            }
        },
        removeItem: (item) => {
            const index = items.value.indexOf(item);
            if (index > -1) {
                items.value.splice(index, 1);
            }
        },
    });
    return {
        items,
        setSelectCallback,
    };
}
export function useActionSheetItem(item) {
    const context = inject(actionSheetContextKey);
    if (!context) {
        throw new Error('ActionSheetItem must be included in ActionSheet.');
    }
    const attrs = useAttrs();
    const mergedItem = reactiveComputed(() => {
        return {
            ...item,
            ...attrs,
        };
    });
    onMounted(() => {
        context.addItem(mergedItem);
    });
    onUnmounted(() => {
        context.removeItem(mergedItem);
    });
    return {
        select: () => {
            context.select(mergedItem);
        },
    };
}