forestry-wx/src/components/ut-action-sheet/ut-action-sheet.vue

<template>
    <template v-if="mode === 'picker'">
        <picker :range="options" range-key="name" @change="selectChange" :disabled="false">
            <slot></slot>
        </picker>
    </template>
    <template v-else-if="mode === 'custom'">
        <view @click="showModel = true" class="flex1">
            <slot></slot>
        </view>
        <up-popup v-model:show="showModel" mode="center" round="30rpx" closeable @close="showModel = false">
            <view class="w-700">
                <view class="pd-24">
                    <view class="f-s-32 c-#333 f-w-500">{{ title }}</view>
                </view>
                <scroll-view scroll-y style="max-height: 70vh">
                    <view class="pd3-10-24-24">
                        <ut-row gap="16rpx">
                            <template v-for="(item, index) in options" :key="index">
                                <ut-col :span="item.span">
                                    <view class="">{{ item?.name }}</view>
                                </ut-col>
                            </template>
                        </ut-row>
                    </view>
                </scroll-view>
            </view>
        </up-popup>
    </template>
</template>
<script setup lang="ts">
import { ref, watch, computed } from 'vue';

const props = defineProps({
    modelValue: {
        type: Array,
        default: () => [],
    },

    title: {
        type: String,
        default: '系统提示',
    },
    showTitle: {
        type: Boolean,
        default: true,
    },
    tabs: {
        type: Array,
        default: () => [],
    },
    mode: {
        type: String,
        default: 'picker', // 原生 picker 模式 或自定义弹窗模式 custom
    },
    // 是否多选
    multiple: {
        type: Boolean,
        default: false, // 只有自定义弹窗模式下生效
    },
});

const options = computed(() => {
    console.log(props.tabs);

    return props.tabs.map((item: any) => {
        return {
            name: item.label,
            value: item.value,
            span: item.elTagClass || 10,
        };
    });
});
const showModel = ref(false);
const emit = defineEmits(['close', 'confirm', 'open', 'update:show', 'update:modelValue', 'change']);
const checkeds = ref({});
const close = () => {
    showModel.value = false;
    // 如果有初始值，恢复初始值
    checkeds.value = { ...initialCheckeds.value };
    emit('update:show', false);
    emit('close');
};

// 未选择之前的
const initialCheckeds = ref({});
const selectChange = (item: any) => {
    const selectedValues = options.value[item.detail.value].value;
    emit('update:modelValue', selectedValues);
    emit('change', selectedValues);
    close();
};
watch(
    () => props.modelValue,
    (newVal) => {},
    { immediate: true }
);
onMounted(() => {
    // 初始化已选择项
    console.log(props.tabs);
});
</script>
<style lang="scss" scoped></style>