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", "screenfull": "6.0.2",
"vue": "3.4.21", "vue": "3.4.21",
"vue-router": "4.3.0", "vue-router": "4.3.0",
"vxe-table": "4.4.1", "vxe-table": "4.5.21",
"vxe-table-plugin-element": "3.0.7", "vxe-table-plugin-element": "4.0.1",
"xe-utils": "3.5.11" "xe-utils": "3.5.22"
}, },
"devDependencies": { "devDependencies": {
"@types/js-cookie": "3.0.6", "@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.use(VXETablePluginElement)
/** 全局默认参数 */ /** 全局默认参数 */
VXETable.setup({ VXETable.config({
/** 全局尺寸 */ /** 全局尺寸 */
size: "medium", size: "medium",
/** 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡 */ /** 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡 */

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

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