Vue 该如何实现这个功能?

settings
  • 482

页面中有一个div
<div v-html="articleContent"></div>

页面加载的时候首先是ajax请求获取到 Article数据,其content 是富文本html代码,绑定到articleContent数据。

现在有一个需求就是需要将 ,rticle的content中的所有的img标签都设置width=400,这个功能该如何实现?

http请求---》articleContent---》将其中的所有img的width设置为400

回复
阅读 956
5 个回答

vue文件是

  <div id="articleContent" ref="articleContent">
                    <div v-html="article.content"></div>

 </div>

http请求之后变成

  <div id="articleContent" ref="articleContent">
                   <p><img></p>
                   <p><img></p>
</div>

需求:设定articleContent div中的所有img的width为400px。


我自己写的方式:

css选择器 #articleContent img{
width:400px

}
这种方式无效。

首先,这种方式是可以的。那么为什么不行呢?肯定是样式优先级的问题,他img标签上带有 style 属性。

那么如何设置样式优先级比行内 style 还高呢? !important

#articleContent img{  
    width:400px !important;
}

用正则表达式处理article.content,给所有的img标签都加上width="400"的属性

你可能需要样式穿透

#articleContent >>> img

一般vue文件css中会有scoped属性,是针对当前模块生效的,如果是在css中让样式生效,你需要这样做:

#articleContent {
    
    /deep/ img {
        width: 400px;
    }
}

或是用正则去匹配此段富文本里面的img标签,给标签动态加上宽度的行内样式

宣传栏