Vue3+Antd 修改antd主题色,配置全局css

html-css017

Vue3+Antd 修改antd主题色,配置全局css,第1张

先贴个官网的图片

然后说说整体流程...

然后重新 npm i

再重新运行,就解决了

奉上参考资料

Vue-cli3.0配置全局less

vue antd 按需加载 报错.bezierEasingMixin()

不能。HTML可能经过文本压缩及字符转换。CSS可能做过自动追加前缀,压缩,或者根本就是用预编译器写出来的。Javascript可能经过压缩,优化。另外,如果打包配置中未设置pathinfo为true的话,将不会包含源文件路径。就算多增加一个空格也和原始的不同了吧?不过,当webpack打包时,可以配置生成.map文件,使用此文件可以还原原文件。你需要问原作者索要。

记录的原因:项目中遇到一个问题,使用 antd 的 table 组件,在鼠标悬停到一行的时候显示或者隐藏按钮,如下:

鼠标进入一行显示设为默认按钮,移出隐藏按钮

开始我的做法是找到 table 组件的属性通过 setState 来改变 button 的 visibility 属性,虽然效果是达到了,但是 显示和隐藏有个时间的延迟 ,开始我以为是因为 setState 的异步机制,会在频繁的设置 state 的时候合并处理导致的,

后来实验之后发现并不是,于是我就不用 setState 的来设置显示和隐藏,直接给tr加上类名,通过 hover 来显示隐藏

这样实验之后发现同样的问题依然存在, 后来想到display跟visibility的区别:一个是占位一个不占位,于是改成display来做,果然达到效果,鼠标一进一出是立刻显示和隐藏的

仔细一想为什么会有这个不同呢,display跟visibility的区别不就是占位不占位么,为什么一个有动画一个没有动画呢,antd对button组件确实做了动画设置

接着我就去 mdn上 搜索关于 transition 动画到底对哪些 css 属性有效果呢,果不其然, display 是没有动画效果的,而 visibility 是有动画效果的

链接如下: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties

又学到一个点啊,由此记录一下:)

参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions# 哪些 CSS 属性可以动画