ant design vue 图片预览组件自定义样式

 更新时间:2023年05月16日 10:41:21   作者:youcans_  
这篇文章主要为大家介绍了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 组件自定义的资料请关注脚本之家其它相关文章!

相关文章

  • GitHub Eclipse配置使用教程详解

    GitHub Eclipse配置使用教程详解

    本文主要介绍GitHub Eclipse,这里对Eclipse 使用GitHub的教程,图文并茂详细说明如何操作,有需要的小伙伴可以参考下
    2016-09-09
  • 从实例分析ELF格式的.gnu.hash区与glibc的符号查询全过程

    从实例分析ELF格式的.gnu.hash区与glibc的符号查询全过程

    把ELF格式是如何组织一个符号,以及动态链接器如何读取并处理这些信息以进行符号查询的全过程详细地讲清楚,本文的实现以及so文件均以glibc 2.31为准,对ELF格式的.gnu.hash区与glibc的符号查询知识感兴趣的朋友一起学习吧
    2021-05-05
  • 程序员 代码是从头编还是使用框架好呢?

    程序员 代码是从头编还是使用框架好呢?

    为什么框架发展得越来越好,因为越来越多的程序员选择使用框架。当处于实际的项目开发中,程序员就会发现项目周期短,使用框架可以最有效地节约时间。如果完全从头开始编程,使用时间太多不说,对程序员的个人编码水平也提出了很高的要求
    2017-08-08
  • 一文秒懂Prometheus 介绍及工作原理

    一文秒懂Prometheus 介绍及工作原理

    这篇文章主要介绍了一文秒懂Prometheus 介绍及工作原理,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • 详解VScode自动补全CSS3前缀插件以及配置无效的解决办法

    详解VScode自动补全CSS3前缀插件以及配置无效的解决办法

    这篇文章主要介绍了详解VScode自动补全CSS3前缀插件以及配置无效的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 关于爬虫和反爬虫的简略方案分享

    关于爬虫和反爬虫的简略方案分享

    这篇文章主要给大家介绍了一些关于爬虫和反爬虫的简略方案的相关资料,文中介绍的非常详细,对大家理解和学习爬虫与反爬虫具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • iisschlp.wsc [88,25] 属性值无效 : progid

    iisschlp.wsc [88,25] 属性值无效 : progid

    今天在运行iisapp.vbs时候提示Windows Script Component - file://C:WINDOWSsystem32iisschlp.wsc [88,25] 属性值无效 : progid,原来是因为安全设置惹的祸,以前就是因为这个一直没解决
    2014-07-07
  • 聊聊Flare应用前后端性能优化问题

    聊聊Flare应用前后端性能优化问题

    这篇文章主要介绍了Flare应用前后端性能优化,制作 flare 的过程,其实也是 flame 性能调优的过程。不过在解决问题之前,我们首先得能定位问题有哪些,带着这些问题一起通过本文学习吧
    2022-02-02
  • 分别使用vue和Android实现长按券码复制功能

    分别使用vue和Android实现长按券码复制功能

    最近分别用vue和Android实现了一个券码复制功能,长按券码会在上方弹出一个拷贝的icon提示,点击icon将券码内容复制到剪贴板。下面小编给大家带来实现代码,需要的朋友参考下吧
    2019-10-10
  • Elasticsearch聚合查询及排序操作示例

    Elasticsearch聚合查询及排序操作示例

    这篇文章主要为大家介绍了Elasticsearch聚合查询及排序操作示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04

最新评论