Os UiModal 对话框
需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。
基础用法
html
<os-button @click="status1 = true">Open Modal</os-button>
<os-modal v-model="status1" title="Tips" width="30%">
这里是主要内容
<template #footer>
<os-button type="primary">Submit</os-button>
<os-button @click="status1 = false">Cancel</os-button>
</template>
</os-modal>位置
使用 position 属性设置 Modal 的弹出位置， 支持六个选项：top-center、top-right、top-left、bottom-center、bottom-right 和 bottom-left， 默认为 top-center。
js
<os-button @click="status.modalPosition = true" class="os-margin-right-s">Bottom Right</os-button>
<os-modal v-model="status.modalPosition"
position="bottom-center"
title="Tips" width="30%">
这里是主要内容
<template #footer>
<os-button type="primary">Submit</os-button>
<os-button @click="status.modalPosition = false">Cancel</os-button>
</template>
</os-modal>抽屉模式
使用 mode 属性设置 Modal 的显示模式， 支持两个选项：drawer、default， 默认为 default。
js
<os-button @click="status.modalMode = true" class="os-margin-right-s">Bottom Right</os-button>
<os-modal v-model="status.modalMode"
mode="drawer"
title="Tips" width="30%">
这里是主要内容
<template #footer>
<os-button type="primary">Submit</os-button>
<os-button @click="status.modalMode = false">Cancel</os-button>
</template>
</os-modal>阻止关闭
使用before-close的返回为false或Promise的reject或resolve(false)均能阻止对话框关闭。
html
<script setup>
import { ref, reactive } from 'vue'
import { osModalTip, osMessage } from '../../index'
const modalClose = ref(false)
const handleBeforeClose = () => {
return new Promise((resolve, reject) => {
osModalTip.confirm('是否允许关闭Modal', '确认提示', {
}).then((s) => {
osMessage('能关闭，立即运行。')
resolve(true)
}).catch((s) => {
osMessage('不能关闭。')
reject()
})
})
}
</script>
<os-button @click="modalClose = true">Open Modal</os-button>
<os-modal v-model="modalClose" title="Tips" :before-close="handleBeforeClose">
这里是主要内容
<template #footer>
<os-button type="primary">Submit</os-button>
<os-button @click="modalClose = false">Cancel</os-button>
</template>
</os-modal>自定头部/尾部
html
<os-button @click=status3" = true">Open Modal</os-button>
<os-modal v-model="status3" width="30%">
<template #title>
Tips
<p style="font-size: 12px;">Popup Tips</p>
</template>
这里是主要内容
<template #footer>
<os-button type="primary">Submit</os-button>
<os-button @click="status3 = false">Cancel</os-button>
</template>
</os-modal>全屏功能
只需设计fullscreen属性为true，即可全屏显示modal