弹窗

PC端

框架提供了一个弹窗组件的封装BasicModal，该组件封装内容较为繁杂，实际使用不需要过多的功能，直接使用ant-design-vue的modal对话框组件即可。下面是一个简单的弹窗组件示例，具体配置项可以点击上方链接查看文档：

<template>
    <a-modal
        :closable="false"
        :visible="visible"
        centered
        title="弹窗"
        width="800px"
        @cancel="close">

        <!-- 弹窗正文内容 -->

        <template #footer>
            <!-- 弹窗底部按钮内容，有默认，如果需自定义就这么写 -->
            <a-button type="primary" @click="submit">保存</a-button>
            <a-button type="primary" @click="close">关闭</a-button>
        </template>
    </a-modal>
</template>
<script setup>
import { ref } from 'vue';
const visible = ref(false); // 弹窗是否显示
const approveType = ref(''); // 审批类型
fuinction close() { // 关闭弹窗
    visible.value = false;
}
function submit() { // 保存
    // 提交逻辑
    visible.value = false;
}
</script>

移动端

移动端弹窗使用uni-popup弹出层组件，组件源码也在系统中，具体参数配置可以看源码。

<template>
    <uni-popup ref="finishRef" type="dialog">
        <uni-popup-dialog ref="inputClose"  mode="base" title="提示" content="确定终止流程吗？"
            placeholder="请输入内容" @confirm="flowFinishConfirm">
            <!--弹窗内容-->
            </uni-popup-dialog>
    </uni-popup>
</template>