ieplus-oldapp/components/mx-paper/components/mx-paper-navigator-popup.vue

<template>
    <mx-popup-template :title="title" v-bind="extBinding" ref="popup">
        <view class="grid grid-cols-4 gap-20">
            <mx-paper-tab-item v-for="q in list" :item="q" clean-mode class="!h-[44px] !w-auto"
                               @click="handleNavigateQuestion(q)"/>
        </view>
    </mx-popup-template>
</template>

<script setup>
import {ref} from 'vue'
import MxPaperTabItem from "@/components/mx-paper/components/mx-paper-tab-item.vue";
import {useInjectPaperService} from "@/components/mx-paper/usePaperInjection";

const popup = ref(null)
const title = ref('')
const list = ref([])
const extBinding = ref({})

const {goToQuestion} = useInjectPaperService()

const handleNavigateQuestion = function (q) {
    goToQuestion(q)
    close()
}

const open = function (questions, description, ext = {left: '', right: ''}) {
    list.value = questions
    title.value = description
    extBinding.value = ext
    popup.value.open()
}

const close = function () {
    popup.value.close()
}

defineExpose({open, close})
</script>

<style scoped>

</style>