micro-app环境下,子系统加载vxe-table样式被吞解决方法

卖关子

本地没问题啊,怎么发上去就没样式了呢?

"不应该啊","我本地不这样啊","怎么回事","神奇"。

1.0

先搜索有没有人遇到过类似的问题,找到了这个提问:

在微前端框架micro-app的子应用中使用vxe-table主题样式失效

不过我看了一下,不管怎么样setTheme方法都会调用的,html标签上也出现了属性data-vxe-ui-theme="light"

2.0

在源代码里面搜索,其实是有相关css文件的,但是因为什么原因没生效

Micro-app里面具有样式隔离

虽说基座应用样式可以影响子应用,但是子应用引用的vxe-table下载下来的css样式会出现在子应用的标签里面。

导致的现象是,原本的样式选择器是:

css 复制代码
[data-vxe-ui-theme=light]{
    ...
}

在生效的时候实际上是

css 复制代码
micro-app[name=xxx] [data-vxe-ui-theme=light] {
    ...
}

其中所有选择器都被加上了micro-app[name=xxx]的前缀。

至此,我们知道,想要实现样式选择,需要把data-vxe-ui-theme=light属性加在子应用里面。

3.0

这是源码里面的实现,在html标签上添加了属性documentElement.setAttribute('data-vxe-ui-theme', theme);,那同理可得,我们在micro-app-body标签添加data-vxe-ui-theme即可。

js 复制代码
function setTheme(name) {
  var theme = !name || name === 'default' ? 'light' : name;
  themeConfigStore.theme = theme;
  if (typeof document !== 'undefined') {
    var documentElement = document.documentElement;
    if (documentElement) {
      documentElement.setAttribute('data-vxe-ui-theme', theme);
    }
  }
  return VxeCore;
}

解决方案

在子应用的App.vue中添加下列代码:

js 复制代码
 computed: {
    isMicroAppEnvironment() {
      return window.__MICRO_APP_ENVIRONMENT__;
    },
  },
 methods: {
    setVxeTableTheme() {
      if (!this.isMicroAppEnvironment) return;
      // data-vxe-ui-theme="light" 用于vxe-table样式回显
      const ele = document.querySelector("micro-app-body");
      ele.setAttribute("data-vxe-ui-theme", "light");
    },
  },
相关推荐
乆夨(jiuze)37 分钟前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
xiguolangzi2 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X2 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come112343 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
海天胜景5 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼5 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再5 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5555 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
木头没有瓜6 小时前
vscode离线安装插件
ide·vue.js·vscode