ivyDesign

Appearance

Modal 对话框 ​

基础用法 ​

通过设置 open 属性来显示 Dialog，通过 close 事件来监听 Dialog 关闭事件。

显示 Dialog
这是 Dialog 的内容部分
这是 Dialog 的内容部分
这是 Dialog 的内容部分
vue
<template>
    <ivy-button type="primary" @click="showDialog">显示 Dialog</ivy-button>

    <ivy-dialog id="modal1" @close="closed" header="Dialog 标题">
        <div>这是 Dialog 的内容部分<br>这是 Dialog 的内容部分<br>这是 Dialog 的内容部分<br></div>
    </ivy-dialog>
</template>
<script setup>
    const showDialog = ()=>{
        document.getElementById('modal1').open = true
    };
    const closed = ()=>{
        console.log('关闭了Modal')
    }
</script>

禁用遮罩层 ​

通过配置 show-mask 为 false 来禁止点击遮罩层关闭 Dialog。

显示 DialogDialog 标题
这是 Dialog 的内容部分
这是 Dialog 的内容部分
这是 Dialog 的内容部分
vue
<template>
    <ivy-button type="primary" @click="showDialog2">显示 Dialog</ivy-button>
    
    <ivy-dialog id="modal2" @close="closed" show-mask="false">
        <span slot="header">Dialog 标题</span>
        <div>这是 Dialog 的内容部分<br>这是 Dialog 的内容部分<br>这是 Dialog 的内容部分<br></div>
    </ivy-dialog>
</template>
<script setup>
const showDialog2 = ()=>{
    document.getElementById('modal2').open = true
};
const closed = ()=>{
    console.log('关闭了Modal')
}
</script>

禁用遮罩层关闭 ​

通过配置 mask-closable 为 false 来禁止点击遮罩层关闭 Dialog。

显示 DialogDialog 标题
这是 Dialog 的内容部分
这是 Dialog 的内容部分
这是 Dialog 的内容部分
vue
<template>
    <ivy-button type="primary" @click="showDialog3">显示 Dialog</ivy-button>
    
    <ivy-dialog id="modal3" @close="closed" mask-closable="false">
        <span slot="header">Dialog 标题</span>
        <div>这是 Dialog 的内容部分<br>这是 Dialog 的内容部分<br>这是 Dialog 的内容部分<br></div>
    </ivy-dialog>
</template>
<script setup>
const showDialog2 = ()=>{
    document.getElementById('modal3').open = true
};
const closed = ()=>{
    console.log('关闭了Modal')
}
</script>

可用的 CSS 变量 ​

点击查看
css
:host {
    --ivy-dialog-header-padding: 16px;
    --ivy-dialog-body-padding: 16px;
    --ivy-dialog-footer-padding: 16px;
    --ivy-dialog-width: 500px;
    --ivy-dialog-top: 14vh;
}

Props ​

Prop描述类型可选值默认值
open是否显示 DialogBoolean-false
headerDialog 标题String--
show-mask是否显示遮罩层Boolean-true
mask-closable是否允许点击遮罩层关闭 DialogBoolean-true

Events ​

事件名描述回调参数
sure点击确认按钮时触发-
close点击关闭/取消时触发，可以通过回调参数判断是那个按钮触发的close/cancel
changeDialog 打开/关闭时出发true/false