ant design vue 图片预览组件自定义样式
作者:youcans_ 时间:2023-03-14 13:11:13
版本:
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
来源:https://juejin.cn/post/7214373797692194871
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python Flask框架开发之运用SocketIO实现WebSSH方法详解
![](https://img.aspxhome.com/file/2023/9/133739_0s.png)
python实现监听键盘
![](https://img.aspxhome.com/file/2023/0/86560_0s.jpg)
Go语言使用钉钉机器人推送消息的实现示例
![](https://img.aspxhome.com/file/2023/4/127064_0s.png)
MySQL在右表数据不唯一的情况下使用left join的方法
![](https://img.aspxhome.com/file/2023/0/114020_0s.png)
轻松解决:mysql数据库连接过多的错误
python求质数的3种方法
修改数据库为多用户模式
python使用BeautifulSoup分页网页中超链接的方法
java-jsp springmvc-controller 传值到页面的方法
Oracle计算时间差常用函数
SQL Server 2008图文安装教程第1/2页
![](https://img.aspxhome.com/file/2023/6/98016_0s.jpg)
一个比较完美的spacer div技巧
对python数据切割归并算法的实例讲解
python安装模块如何通过setup.py安装(超简单)
![](https://img.aspxhome.com/file/2023/4/59294_0s.png)
如何利用Image Data Type在主页中显示图形?
Flask使用SQLAlchemy实现持久化数据
通过两种方式增加从库——不停止mysql服务
css中absolute与relative的区别
![](https://img.aspxhome.com/file/UploadPic/20071/200713110612782s.gif)
Pandas 数据处理,数据清洗详解
win2008下mysql8.0.11升级mysql8.0.17版本详细步骤
![](https://img.aspxhome.com/file/2023/6/128046_0s.png)