84 lines
2.2 KiB
Plaintext
84 lines
2.2 KiB
Plaintext
<template>
|
||
<div>
|
||
<div class="n-layout-page-header">
|
||
<a-card :bordered="false" title="模态框">
|
||
模态框，用于向用户收集或展示信息，扩展 antd Modal 组件，比如拖拽，全屏等效果，
|
||
<br />
|
||
以下是 useModal
|
||
方式，ref方式，也支持，使用方式和其他组件一致，如：modalRef.value.closeModal()
|
||
</a-card>
|
||
</div>
|
||
<a-card :bordered="false" class="mt-4 proCard">
|
||
<a-alert message="Modal嵌套Form" type="info">
|
||
<template #description>
|
||
使用 useModal
|
||
进行弹窗展示和操作，并演示了在Modal内和Form组件，组合使用方法，禁用点击蒙层关闭
|
||
</template>
|
||
</a-alert>
|
||
<a-divider />
|
||
<a-space>
|
||
<a-button type="primary" @click="openModal1">打开Modal嵌套Form例子</a-button>
|
||
</a-space>
|
||
<a-divider />
|
||
|
||
<a-alert message="内部方法演示" type="info">
|
||
<template #description>
|
||
使用 useModal 进行弹窗展示和操作，关闭弹窗，设置标题，更多用法，请参考文档
|
||
</template>
|
||
</a-alert>
|
||
<a-divider />
|
||
<a-space>
|
||
<a-button type="primary" @click="openModal2">打开演示</a-button>
|
||
</a-space>
|
||
<a-divider />
|
||
<a-alert message="提示" type="info">
|
||
<template #description>
|
||
组件暴露了，setProps 方法，用于修改组件内部
|
||
Props，比如标题，等，具体参考UI框架文档，请参考文档
|
||
</template>
|
||
</a-alert>
|
||
</a-card>
|
||
|
||
<Modal1 ref="modal1Ref" />
|
||
<Modal2 ref="modal2Ref" />
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref } from 'vue';
|
||
import Modal1 from './Modal1.vue';
|
||
import Modal2 from './Modal2.vue';
|
||
|
||
const modal1Ref = ref(null);
|
||
const modal2Ref = ref(null);
|
||
|
||
function openModal1() {
|
||
modal1Ref.value.openModal();
|
||
}
|
||
|
||
function openModal2() {
|
||
modal2Ref.value.openModal();
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.n-dialog.basicFormModal {
|
||
width: 640px;
|
||
}
|
||
|
||
.n-dialog.basicModalLight {
|
||
width: 410px;
|
||
}
|
||
</style>
|
||
|
||
<style lang="less" scoped>
|
||
.basicForm {
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.n-dialog.basicModalLight {
|
||
width: 416px;
|
||
padding-top: 26px;
|
||
}
|
||
</style>
|