admin/jdcProject_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 升级 vxe-table 并适配主题切换 (#177)

Browse Source 
Co-authored-by: pany <939630029@qq.com>
This commit is contained in:
nevlf 2024-03-21 15:28:43 +08:00 committed by GitHub
parent 2fa3fc05fb
commit 6a6c39395c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 46 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -40,9 +40,9 @@
"screenfull": "6.0.2",
"vue": "3.4.21",
"vue-router": "4.3.0",
"vxe-table": "4.4.1",
"vxe-table-plugin-element": "3.0.7",
"xe-utils": "3.5.11"
"vxe-table": "4.5.21",
"vxe-table-plugin-element": "4.0.1",
"xe-utils": "3.5.22"
},
"devDependencies": {
"@types/js-cookie": "3.0.6",

2
src/plugins/vxe-table/index.ts
View File

@ -7,7 +7,7 @@ import VXETablePluginElement from "vxe-table-plugin-element"
VXETable.use(VXETablePluginElement)
/** 全局默认参数 */
VXETable.setup({
VXETable.config({
/** 全局尺寸 */
size: "medium",
/** 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡 */

87
src/styles/theme/core/vxe-table.scss
View File

@ -1,58 +1,55 @@
/**
* Vxe Table SCSS 变量
* 在此查阅所有可自定义的变量：https://github.com/x-extends/vxe-table/blob/master/styles/variable.scss
* Vxe Table CSS 变量
* 在此查阅所有可自定义的变量：https://github.com/x-extends/vxe-table/blob/master/styles/css-variable.scss
*/
/** font */
$vxe-font-color: $font-color;
* {
/*color*/
--vxe-font-color: #{$font-color};
--vxe-primary-color: #{$theme-color};
--vxe-success-color: #{$theme-color};
/** color */
$vxe-primary-color: $theme-color;
$vxe-success-color: $theme-color;
/*input/radio/checkbox*/
--vxe-input-border-color: #{$theme-color};
--vxe-input-disabled-color: #{$theme-color};
--vxe-input-disabled-background-color: #{lighten($theme-bg-color, 12%)};
/** input/radio/checkbox */
$vxe-input-border-color: $theme-color;
$vxe-input-disabled-color: $theme-color;
$vxe-input-disabled-background-color: lighten($theme-bg-color, 12%);
/*popup*/
--vxe-table-popup-border-color: #{$border-color};
/** popup */
$vxe-table-popup-border-color: $border-color;
/*table*/
--vxe-table-border-color: #{$border-color};
--vxe-table-header-background-color: #{lighten($theme-bg-color, 8%)};
--vxe-table-body-background-color: #{lighten($theme-bg-color, 4%)};
--vxe-table-row-hover-background-color: #{lighten($theme-bg-color, 8%)};
--vxe-table-row-current-background-color: #{lighten($theme-bg-color, 8%)};
--vxe-table-row-hover-current-background-color: #{lighten($theme-bg-color, 8%)};
--vxe-table-checkbox-range-background-color: #{lighten($theme-bg-color, 8%)};
/** table */
$vxe-table-font-color: $font-color;
$vxe-table-border-color: $border-color;
$vxe-table-header-background-color: lighten($theme-bg-color, 8%);
$vxe-table-body-background-color: lighten($theme-bg-color, 4%);
$vxe-table-row-hover-background-color: lighten($theme-bg-color, 8%);
$vxe-table-row-current-background-color: lighten($theme-bg-color, 8%);
$vxe-table-row-hover-current-background-color: lighten($theme-bg-color, 8%);
$vxe-table-checkbox-range-background-color: lighten($theme-bg-color, 8%);
/*toolbar*/
--vxe-toolbar-background-color: #{lighten($theme-bg-color, 4%)};
--vxe-toolbar-custom-active-background-color: #{lighten($theme-bg-color, 16%)};
--vxe-toolbar-panel-background-color: #{lighten($theme-bg-color, 4%)};
/** toolbar */
$vxe-toolbar-background-color: lighten($theme-bg-color, 4%);
$vxe-toolbar-custom-active-background-color: lighten($theme-bg-color, 16%);
$vxe-toolbar-panel-background-color: lighten($theme-bg-color, 4%);
/*pager*/
--vxe-pager-background-color: #{lighten($theme-bg-color, 4%)};
/** pager */
$vxe-pager-background-color: lighten($theme-bg-color, 4%);
/*modal*/
--vxe-modal-header-background-color: #{lighten($theme-bg-color, 4%)};
--vxe-modal-body-background-color: #{lighten($theme-bg-color, 4%)};
--vxe-modal-border-color: #{$border-color};
/** modal */
$vxe-modal-header-background-color: lighten($theme-bg-color, 4%);
$vxe-modal-body-background-color: lighten($theme-bg-color, 4%);
$vxe-modal-border-color: $border-color;
/*button*/
--vxe-button-default-background-color: #{lighten($theme-bg-color, 8%)};
/** button */
$vxe-button-default-background-color: lighten($theme-bg-color, 8%);
/*input*/
--vxe-input-background-color: #{lighten($theme-bg-color, 4%)};
--vxe-input-panel-background-color: #{lighten($theme-bg-color, 4%)};
/** input */
$vxe-input-background-color: lighten($theme-bg-color, 4%);
$vxe-input-panel-background-color: $vxe-input-background-color;
/*form*/
--vxe-form-background-color: #{lighten($theme-bg-color, 4%)};
/** form */
$vxe-form-background-color: lighten($theme-bg-color, 4%);
/** select */
$vxe-select-option-hover-background-color: lighten($theme-bg-color, 8%);
$vxe-select-panel-background-color: lighten($theme-bg-color, 4%);
@import "vxe-table/styles/index.scss";
/*select*/
--vxe-select-option-hover-background-color: #{lighten($theme-bg-color, 8%)};
--vxe-select-panel-background-color: #{lighten($theme-bg-color, 4%)};
}