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");
    },
  },
相关推荐
晨枫阳8 小时前
前端VUE项目-day1
前端·javascript·vue.js
艾普阳科技10 小时前
解锁多对多关系设计:SnapDevelop助你轻松实现用户角色管理,效率提升100%!
vue.js
sunbyte10 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GithubProfies(GitHub 个人资料)
前端·javascript·css·vue.js·github·tailwindcss
Hijin10 小时前
快速搭建 Vite+vue3+TS+ESLint@9+Prettier+Husky@9+Commitlint 项目
前端·javascript·vue.js
无懈可击10 小时前
FormCreate低代码表单设计器 v3.3 版本发布,功能大更新!
vue.js·低代码·开源
独立开阀者_FwtCoder11 小时前
踩坑无数后,我终于总结出这份最全的 Vue3 组件通信实战指南
前端·javascript·vue.js
202612 小时前
12. npm version方法总结
前端·javascript·vue.js
用户876128290737412 小时前
mapboxgl中对popup弹窗添加事件
前端·vue.js
浩星13 小时前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app
wocwin13 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序