Vent-App/pages/gasreport/components/popupModal.vue

<template>
    <view class="popupModal">
        <u-popup :show="showModel" :zIndex="1" :overlay="true" :overlayStyle="{ 'z-index': 0 }" safeAreaInsetBottom
            safeAreaInsetTop :customStyle="{ width: '240px', margin: '44px 0px 51px 0px' }" mode="left">

            <view>
                <u-list>
                    <u-list-item v-for="(item, index) in indexList" :key="index">
                        <u-cell icon="star" :title="item.label"   v-if="!item.children" @click="handlerClick(item)"></u-cell>
                        <u-cell-group v-else :border="false" >
                            <u-cell icon="star" :title="item.label"   ></u-cell>
                            <u-cell v-for="(ite,ind) in item.children" icon="minus" style="padding: '0px 30px'" :border="ind==2 ? true: false"  :label="ite.label" @click="handlerClick(ite)"></u-cell>
                        </u-cell-group>
                    </u-list-item>
                </u-list>
            </view>

        </u-popup>

    </view>
</template>

<script>
export default {
    name: 'popupModal',
    props: {
        showModel: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            indexList: [
                { id: 1, label: '瓦斯巡检记录卡管理', },
                {
                    id: 2, label: '巡检任务面板', children: [
                        { label: '早班', },
                        { label: '中班' },
                        { label: '夜班' },
                    ]
                },
                { id: 3, label: '瓦斯巡检填报' },
            ],
        }
    },
    mounted() { },
    methods: {
        handlerClick(item){
           let data=item.label
           this.$emit('handlerClick',data)

        }

    }
}
</script>

<style lang="scss" scoped>
.popupModal {
    height: 100%;
}
</style>