twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-03 13:44:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明

Browse Source
This commit is contained in:
xiaoxian521 2022-12-03 14:39:23 +08:00
parent 17936d476c
commit c80818d792
4 changed files with 45 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -36,7 +36,7 @@
"@logicflow/extension": "^1.1.30", "@logicflow/extension": "^1.1.30",
"@pureadmin/descriptions": "^1.1.0", "@pureadmin/descriptions": "^1.1.0",
"@pureadmin/table": "^1.8.2", "@pureadmin/table": "^1.8.2",
"@pureadmin/utils": "^1.7.1", "@pureadmin/utils": "^1.7.2",
"@vueuse/core": "^9.6.0", "@vueuse/core": "^9.6.0",
"@vueuse/motion": "2.0.0-beta.12", "@vueuse/motion": "2.0.0-beta.12",
"@wangeditor/editor": "^5.1.21", "@wangeditor/editor": "^5.1.21",

8
pnpm-lock.yaml generated
View File

@ -16,7 +16,7 @@ specifiers:
"@pureadmin/descriptions": ^1.1.0 "@pureadmin/descriptions": ^1.1.0
"@pureadmin/table": ^1.8.2 "@pureadmin/table": ^1.8.2
"@pureadmin/theme": ^2.4.0 "@pureadmin/theme": ^2.4.0
"@pureadmin/utils": ^1.7.1 "@pureadmin/utils": ^1.7.2
"@types/element-resize-detector": 1.1.3 "@types/element-resize-detector": 1.1.3
"@types/intro.js": ^5.1.0 "@types/intro.js": ^5.1.0
"@types/js-cookie": ^3.0.1 "@types/js-cookie": ^3.0.1
@ -127,7 +127,7 @@ dependencies:
"@logicflow/extension": 1.1.31 "@logicflow/extension": 1.1.31
"@pureadmin/descriptions": 1.1.1_element-plus@2.2.26 "@pureadmin/descriptions": 1.1.1_element-plus@2.2.26
"@pureadmin/table": 1.8.2_element-plus@2.2.26 "@pureadmin/table": 1.8.2_element-plus@2.2.26
"@pureadmin/utils": 1.7.1_aotapuqn7htzdjltsyimavekky "@pureadmin/utils": 1.7.2_aotapuqn7htzdjltsyimavekky
"@vueuse/core": 9.6.0_vue@3.2.45 "@vueuse/core": 9.6.0_vue@3.2.45
"@vueuse/motion": 2.0.0-beta.12_vue@3.2.45 "@vueuse/motion": 2.0.0-beta.12_vue@3.2.45
"@wangeditor/editor": 5.1.23 "@wangeditor/editor": 5.1.23
@ -1300,10 +1300,10 @@ packages:
string-hash: 1.1.3 string-hash: 1.1.3
dev: true dev: true
/@pureadmin/utils/1.7.1_aotapuqn7htzdjltsyimavekky: /@pureadmin/utils/1.7.2_aotapuqn7htzdjltsyimavekky:
resolution: resolution:
{ {
integrity: sha512-LqYdMR1xvRDtPp66osOY6usmta6LNGMuON14iONv4ZUC/esQ3RflHlT5glGjOfGUSGCk8O94F5LVS/PVC9Q3Ng== integrity: sha512-L8tmogs9HCX6nuga1g79DcZr3KXNoWnIFcyP2z4zpmUmdBBAmMpXXz3Z+emI6HELmZu8DFx+v1MfKxccgsODRQ==
} }
peerDependencies: peerDependencies:
dayjs: "*" dayjs: "*"

13
src/style/dark.scss
View File

@ -187,6 +187,19 @@ html.dark {
background: transparent; background: transparent;
} }
/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
.el-icon {
&.el-dialog__close,
&.el-drawer__close,
&.el-message-box__close,
&.el-notification__closeBtn {
&:hover {
color: rgba(255, 255, 255, 0.85) !important;
background-color: rgba(255, 255, 255, 0.12);
}
}
}
/* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，非暗黑模式在 src/style/element-plus.scss 文件进行了适配 */ /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，非暗黑模式在 src/style/element-plus.scss 文件进行了适配 */
.pure-message { .pure-message {
background-image: initial !important; background-image: initial !important;

27
src/style/element-plus.scss
View File

@ -69,6 +69,33 @@
} }
} }
/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
.el-dialog__headerbtn,
.el-message-box__headerbtn {
&:hover {
.el-dialog__close {
color: var(--el-color-info) !important;
}
}
}
.el-icon {
&.el-dialog__close,
&.el-drawer__close,
&.el-message-box__close,
&.el-notification__closeBtn {
width: 24px;
height: 24px;
outline: none;
border-radius: 4px;
transition: background-color 0.2s, color 0.2s;
&:hover {
color: rgba(0, 0, 0, 0.88) !important;
background-color: rgba(0, 0, 0, 0.06);
text-decoration: none;
}
}
}
/* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，暗黑模式在 src/style/dark.scss 文件进行了适配 */ /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，暗黑模式在 src/style/dark.scss 文件进行了适配 */
.pure-message { .pure-message {
border-width: 0 !important; border-width: 0 !important;