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(`
框架提供了一个弹窗组件的封装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>