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 版本

相关推荐
excel8 分钟前
Vue 3 实现高性能虚拟列表:Spacer 占位 vs Absolute 定位,哪种更优?
前端
SoaringHeart37 分钟前
Flutter进阶:实现比赛对阵图/淘汰赛
前端·flutter
.用户昵称已存在.1 小时前
HTML 核心元素实战:超链接、iframe 框架与 form 表单全面解析
前端·microsoft·html
MediaTea10 小时前
Python 第三方库:lxml(高性能 XML/HTML 解析与处理)
xml·开发语言·前端·python·html
西陵10 小时前
Nx带来极致的前端开发体验——使用MF进行增量构建
前端·javascript·架构
Nicholas6811 小时前
flutter滚动视图之ProxyWidget、ProxyElement、NotifiableElementMixin源码解析(九)
前端
JackieDYH11 小时前
vue3中reactive和ref如何使用和区别
前端·javascript·vue.js
ZZHow102412 小时前
React前端开发_Day4
前端·笔记·react.js·前端框架·web
前端开发爱好者12 小时前
弃用 html2canvas!快 93 倍的截图神器
前端·javascript·vue.js
ss27312 小时前
手写MyBatis第39弹:深入MyBatis BatchExecutor实现原理与最佳实践
前端·javascript·html