ant design vue 图片预览组件自定义样式
版本：
ant design vue 3.2.4
场景：
使用Image图片组件预览功能
需求：
自定义预览遮罩层及预览图片的样式；
不得影响到其他页面or组件的样式；
for example，下图是预览组件默认样式：
我希望改个背景颜色，类似这样：
难点： 不同于modal，tooltip这种，Image组件没有给预览功能的wrapper直接赋值类名的属性（起码文档上没有提到）；
那就意味着只能到把预览组件的样式改到全局作用域里，那势必会影响到别的页面的样式；
解决方式：
思路就是两个方面：
- 把预览的整个组件放到一个自定义类名的dom元素里（默认是放在最外层body下的）；
官方提供的相关的配置previewType：
{
visible?: boolean;
onVisibleChange?: (visible, prevVisible) => void;
getContainer: string | HTMLElement | (() => HTMLElement);
}
乍一看可以用getContainer来解决，whatever，太麻烦~
- 回归本心，想办法给预览组件附上自定义类名；
上antd源码，看看我发现了什么：
prefixCls，针对这个文档中没提到的属性深入下去,先看setup的render
关键在这儿：
{ "class": "".concat(prefixCls.value, "-mask-info") }
不出所料哈，prefixCls这个props果然是提供给预览的遮罩层做类名的；
那剩下事情就很简单了，只要给Image组件提供prefixCls的属性，把自定义的类名赋值上去就行了；类似这样~
最后一个point：prefixCls是有默认值的，值为ant-image，如果直接给prefixCls赋值一个字符串，其实是把它的默认样式给覆盖掉了，；就需要从头写一套预览功能的样式，很麻烦；所以我们给prefixCls赋值时，完全可以像上图那样，采用 “自定义类名 ant-image” 的格式；然后就可以在保留原样式的基础上，快乐利用自定义类名去覆盖部分样式了；
end
以上就是ant design vue 图片预览组件自定义样式的详细内容，更多关于ant design vue 组件自定义的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了DevOps,CI,CD,自动化简单介绍,通过本文给大家简单介绍DevOps,CI,CD,自动化这四者的基本概念，需要的朋友可以参考下2021-07-07
http请求405错误方法不被允许的解决 (Method not allowed)
这篇文章主要介绍了http请求405错误方法不被允许的解决 (Method not allowed)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要为大家介绍了Git的工作流模式及命令的使用讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
JetBrains旗下有多款编译器工具（如：IntelliJ、WebStorm、PyCharm等）在各编程领域几乎都占据了垄断地位。今天给大家分享大批IDEA 激活码到期之后的乱象，大家可以参考下2020-07-07
这篇文章主要介绍了Hadoop环境搭建过程中遇到的问题及解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2019-08-08
这篇文章主要介绍了一看就懂的IDEA编辑器 .http教程详解,本文以PHPStorm的ide作为例子的讲解，需要的朋友可以参考下2020-11-11
在Windows系统上安装Cygwin搭建Swoole测试环境的图文教程
这篇文章主要介绍了在Windows系统上安装Cygwin搭建Swoole测试环境的方法，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
大数据HelloWorld-Flink实现WordCount
这篇文章主要介绍了大数据HelloWorld-Flink实现WordCount的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
对很多人来说，每当学习一门新的编程语言，写下的第一行代码可能都是“Hello,World!“。因此，”Hello，World!" 已经成为一段经典程序。在成长中，程序员通常会使用多种编程语言，大部分程序员甚至实现过十几种”Hello,World!”版本。2022-12-12
这篇文章主要介绍了如何申请Jetbrains系列软件无限期免费用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
最新评论