import{_ as a,c as s,a as t,o as p}from"./app-CDlLWk6N.js";const e={};function l(c,n){return p(),s("div",null,n[0]||(n[0]=[t(`

弹窗

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>
`,7)]))}const u=a(e,[["render",l]]),i=JSON.parse('{"path":"/front_dev/adv/dialog.html","title":"弹窗","lang":"en-US","frontmatter":{},"headers":[{"level":3,"title":"PC端","slug":"pc端","link":"#pc端","children":[]},{"level":3,"title":"移动端","slug":"移动端","link":"#移动端","children":[]}],"git":{"updatedTime":1744948341000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":2}],"changelog":[{"hash":"15bb17fa4abbd90c367c26723576743b542e6c8a","time":1744948341000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 高级二开文档补充"},{"hash":"2e6e32b0e3baba1ad91f570dfa63514a97cb2d2b","time":1744795964000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 表单介绍:字段事件;高级二开:弹窗、表单、表格"}]},"filePathRelative":"front_dev/adv/dialog.md"}');export{u as comp,i as data};