Browse Source

fix: 主题切换XTable颜色修改

bimei 2 years ago
parent
commit
7c325ee96d
1 changed files with 28 additions and 2 deletions
  1. 28 2
      src/components/XTable/src/XTable.vue

+ 28 - 2
src/components/XTable/src/XTable.vue

@@ -12,6 +12,7 @@ import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 import { XTableProps } from './type'
 import { isBoolean, isFunction } from '@/utils/is'
+import styleCss from './style/dark.scss'
 
 import download from '@/utils/download'
 
@@ -26,14 +27,39 @@ const prefixCls = getPrefixCls('x-vxe-table')
 const attrs = useAttrs()
 const emit = defineEmits(['register'])
 
+const removeStyles = () => {
+  var filename = 'cssTheme'
+  //移除引入的文件名
+  var targetelement = 'style'
+  var targetattr = 'id'
+  var allsuspects = document.getElementsByTagName(targetelement)
+  for (var i = allsuspects.length; i >= 0; i--) {
+    if (
+      allsuspects[i] &&
+      allsuspects[i].getAttribute(targetattr) != null &&
+      allsuspects[i].getAttribute(targetattr)?.indexOf(filename) != -1
+    ) {
+      console.log(allsuspects[i], 'node')
+      allsuspects[i].parentNode?.removeChild(allsuspects[i])
+    }
+  }
+}
+const reImport = () => {
+  var head = document.getElementsByTagName('head')[0]
+  var style = document.createElement('style')
+  style.innerText = styleCss
+  style.id = 'cssTheme'
+  head.appendChild(style)
+}
+
 watch(
   () => appStore.getIsDark,
   () => {
     if (appStore.getIsDark == true) {
-      import('./style/dark.scss')
+      reImport()
     }
     if (appStore.getIsDark == false) {
-      import('./style/light.scss')
+      removeStyles()
     }
   },
   { immediate: true }