antdv@4.x在360极速浏览器兼容解决办法

一、背景

由于Ant Design Vue 支持最近 2 个版本的现代浏览器。而360极速浏览器最新的内核版本为86.xx,而 :where选择器只支持88.xx以上的版本内核(可以在caniuse查看兼容设备),导致页面显示异常。

二、解决办法

根据官网建议,进行降级处理。具体代码如下:

js 复制代码
import { ConfigProvider, StyleProvider, legacyLogicalPropertiesTransformer } from 'ant-design-vue';
<ConfigProvider :theme="themeStore.antdTheme" :locale="antdLocale">
    <AppProvider>
      <StyleProvider hash-priority="high" :transformers="[legacyLogicalPropertiesTransformer]">
        <RouterView class="bg-layout" />
      </StyleProvider>
    </AppProvider>
  </ConfigProvider>

遇到的问题

发现message的样式仍然还有 :where选择器,后续发现是我的AppProvider里面对message, modal, notification进行了处理,应该也包含在StyleProvider里面。改动如下

js 复制代码
<StyleProvider hash-priority="high" :transformers="[legacyLogicalPropertiesTransformer]">
      <AppProvider>
        <RouterView class="bg-layout" />
      </AppProvider>
</StyleProvider>

同时发现之前写的unocss样式不生效了

想办法提升一下unocss的权重,将unocss权重提升,通过查阅文档发现可以改unocss模式

改完之后发现import 'uno.css';导入找不到了,手动将这个css文件内容复制下来,本地创建一份,同时改引入路径,去掉import 'uno.css',改成import '../styles/css/uno.css';

调试

不想频繁打包,可以在本地打包之后,使用http-server启动一个服务,因为我们的项目都是基于sso,使用keyclock,登录需要配置ip白名单,并且指定端口,例如http-server -p 9527 本项目基于SoybeanAdmin AntDesignVue 版本

相关推荐
Bdygsl25 分钟前
前端开发:HTML(5)—— 表单
前端·html
望获linux30 分钟前
【实时Linux实战系列】实时数据流处理框架分析
linux·运维·前端·数据库·chrome·操作系统·wpf
国家不保护废物41 分钟前
TailwindCSS:原子化CSS的革命,让React开发爽到飞起!🚀
前端·css·react.js
程序视点1 小时前
如何高效率使用 Cursor ?
前端·后端·cursor
前端领航者1 小时前
重学Vue3《 v-for的key属性:性能差异与最佳实践》
前端·javascript
归于尽1 小时前
跨域问题从青铜到王者:JSONP、CORS原理详解与实战(前端必会)
前端·浏览器
Andy_GF1 小时前
纯血鸿蒙HarmonyOS Next 远程测试包分发
前端·ios·harmonyos
嗑药狂写9W行代码2 小时前
cesium修改源码支持4490坐标系
前端
小山不高2 小时前
react实现leaferjs编辑器之形状裁剪功能点
前端
20262 小时前
13.2 ssr基本原理,构建步骤
前端·vue.js