update 优化弹窗显示效果
This commit is contained in:
@@ -106,7 +106,12 @@ html, body, #app {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ant-modal-mask {
|
.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
|
// 下拉框样式-start
|
||||||
@@ -200,6 +205,7 @@ html, body, #app {
|
|||||||
//Modal
|
//Modal
|
||||||
.dialog.light {
|
.dialog.light {
|
||||||
background-color: #f3f5ff;
|
background-color: #f3f5ff;
|
||||||
|
border: 1px solid #f3f5ff;
|
||||||
|
|
||||||
.police-con {
|
.police-con {
|
||||||
color: var(--tableFontColor);
|
color: var(--tableFontColor);
|
||||||
|
|||||||
@@ -6,6 +6,7 @@
|
|||||||
:width="props.width"
|
:width="props.width"
|
||||||
:maskClosable="true"
|
:maskClosable="true"
|
||||||
@cancel="handleCancel"
|
@cancel="handleCancel"
|
||||||
|
destroy-on-close
|
||||||
>
|
>
|
||||||
<slot name="container"></slot>
|
<slot name="container"></slot>
|
||||||
<template #footer></template>
|
<template #footer></template>
|
||||||
@@ -39,6 +40,11 @@
|
|||||||
border: 1px solid #0a50a0;
|
border: 1px solid #0a50a0;
|
||||||
background-color: #00152b;
|
background-color: #00152b;
|
||||||
padding-bottom: 0;
|
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 {
|
.ant-modal-title {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@@ -1,10 +1,21 @@
|
|||||||
import { ref } from 'vue';
|
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 } = {}) {
|
export function useDialog({ title } = {}) {
|
||||||
const visible = ref(false);
|
const visible = ref(false);
|
||||||
|
|
||||||
function openDialog() {
|
function openDialog() {
|
||||||
visible.value = true;
|
visible.value = true;
|
||||||
|
dealMaskStyle();
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeDialog() {
|
function closeDialog() {
|
||||||
|
|||||||
Reference in New Issue
Block a user