dz-app/components/mx-popup-template/mx-popup-template.vue

<template>
    <uv-popup ref="popup" v-bind="props" :safe-area-inset-bottom="mode=='bottom'"
              @change="$emit('change',$event)" @mask-click="$emit('maskClick', $event)">
        <view :class="containerClass">
            <view class="mb-40 text-main text-xl text-center">{{ title }}</view>
            <view v-if="description" class="mb-30 text-content">{{ description }}</view>
            <scroll-view scroll-y style="max-height: 50vh">
                <slot>
                    <uv-parse v-if="content" :content="content" container-style="color:var(--main-color)"/>
                </slot>
            </scroll-view>
            <mx-bottom-buttons :left="left" :right="right" :loading="loading" @left="$emit('left')"
                               @right="$emit('right')" class="mt-40"/>
        </view>
    </uv-popup>
</template>

<script setup>
import {ref} from 'vue'
import {popupProps} from "@/uni_modules/uv-popup/components/uv-popup/uv-popup.vue";
import {createPropDefine} from "@/utils";

const props = defineProps({
    ...popupProps,
    mode: createPropDefine('center'),
    round: createPropDefine(16, [Number, String]),
    title: createPropDefine(''),
    description: createPropDefine(''),
    content: createPropDefine(''),
    // left/right 没有默认值，不会显示底部按钮
    left: createPropDefine('取消'),
    right: createPropDefine('保存'),
    loading: createPropDefine(false, Boolean),
    containerClass: createPropDefine('w-[80vw] px-30 py-40')
})
const emits = defineEmits(['change', 'maskClick', 'left', 'right'])

const popup = ref(null)

defineExpose({open: () => popup.value.open(), close: () => popup.value.close()})
</script>

<style scoped>

</style>