update 优化弹窗显示效果
This commit is contained in:
@@ -106,7 +106,12 @@ html, body, #app {
|
||||
}
|
||||
|
||||
.ant-modal-mask {
|
||||
background-color: rgba(0, 0, 0, 0.65) !important;
|
||||
background-color: #00000073 !important;
|
||||
}
|
||||
|
||||
/* 为其他所有的 .ant-modal-mask 设置透明背景 */
|
||||
.ant-modal-mask.no-mask {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
// 下拉框样式-start
|
||||
@@ -200,6 +205,7 @@ html, body, #app {
|
||||
//Modal
|
||||
.dialog.light {
|
||||
background-color: #f3f5ff;
|
||||
border: 1px solid #f3f5ff;
|
||||
|
||||
.police-con {
|
||||
color: var(--tableFontColor);
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
:width="props.width"
|
||||
:maskClosable="true"
|
||||
@cancel="handleCancel"
|
||||
destroy-on-close
|
||||
>
|
||||
<slot name="container"></slot>
|
||||
<template #footer></template>
|
||||
@@ -39,6 +40,11 @@
|
||||
border: 1px solid #0a50a0;
|
||||
background-color: #00152b;
|
||||
padding-bottom: 0;
|
||||
min-height: 300px;
|
||||
box-shadow:
|
||||
0 3px 6px -4px #0000001f,
|
||||
0 6px 16px #00000014,
|
||||
0 9px 28px 8px #0000000d;
|
||||
|
||||
.ant-modal-title {
|
||||
position: relative;
|
||||
|
||||
@@ -1,10 +1,21 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
export function dealMaskStyle() {
|
||||
const maskList = document.getElementsByClassName('ant-modal-mask') as HTMLCollectionOf<HTMLElement>;
|
||||
let visibleMasks = Array.from(maskList).filter((item) => item.style.display !== 'none');
|
||||
if (visibleMasks.length > 1) {
|
||||
for (let i = 1; i < visibleMasks.length; i++) {
|
||||
visibleMasks[i].classList.add('no-mask');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function useDialog({ title } = {}) {
|
||||
const visible = ref(false);
|
||||
|
||||
function openDialog() {
|
||||
visible.value = true;
|
||||
dealMaskStyle();
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
|
||||
Reference in New Issue
Block a user