ui-modal 模态弹窗组

版本：v2.3.11

模态弹窗组件用于显示弹窗内容，支持自定义标题、内容和按钮

基本使用

<template>
  <div class="modal-demo">
    <ui-button @click="showModal = true">打开弹窗</ui-button>
    <ui-modal v-model:show="showModal" title="弹窗标题">
      <div style="padding: 20px;">
        这是弹窗的内容区
      </div>
      <template #footer>
        <ui-button @click="showModal = false">取消</ui-button>
        <ui-button type="primary" @click="showModal = false">确定</ui-button>
      </template>
    </ui-modal>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const showModal = ref(false);
</script>

<style scoped>
.modal-demo {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Props

参数	类型	默认值	说明
show	Boolean	false	是否显示弹窗
title	String	-	弹窗标题
width	Number/String	50%	弹窗宽度，单位：px %
height	Number/String	-	弹窗高度，单位：px %
mask	Boolean	true	是否显示遮罩
maskClosable	Boolean	true	点击遮罩层是否可关闭弹窗
closable	Boolean	true	是否显示关闭按钮
showHeader	Boolean	true	是否显示弹窗头部
showFooter	Boolean	true	是否显示弹窗底部
zIndex	Number	1000	弹窗层级

Events

事件	说明	回调参数
show	弹窗显示时触	-
hide	弹窗隐藏时触	-
close	关闭弹窗时触	-
confirm	点击确认按钮时触	-
cancel	点击取消按钮时触	-

Slots

名称	说明
default	弹窗内容
title	自定义标题内
header	自定义头部内
footer	自定义底部内
close-icon	自定义关闭按钮图

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/functional/modal/modal