vue中使用v-html渲染html增加样式,>>>样式不生效问题
经过百度发现,是没有加上样式,这个原因很简单,HTML样式问题;起初是直接在style里面写相应的样式,卵用没有;网上搜索了一下,发现有老哥也是遇到了这个问题,同时结合官方说法,说是使用scoped后,父组件的样式将不会渗透到子组件中。从而造成这个问题,但是不使用scoped,又会造成css的污染;不过vue的深度作用选择器来了,如果你希望scoped样式中的一个选择器能够作用得“更深”,例如影响
·
要想渲染富文本,只需要v-html绑定html文本即可:
但是会发现里面的img图片会溢出盒子:
经过百度发现,是没有加上样式,这个原因很简单,HTML样式问题;知道原因,那么修改样式啊;起初是直接在 style 里面写相应的样式,卵用没有; 网上搜索了一下,发现有老哥也是遇到了这个问题,同时结合官方说法,说是使用 scoped后,父组件的样式将不会渗透到子组件中。从而造成这个问题,但是不使用scoped,又会造成css的污染;不过vue的深度作用选择器来了,如果你希望 scoped样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>>操作符,可以解决这一问题;
要给v-html增加样式的方法:
.body >>> img {
width: 100%;
object-fit: fill;
}
但是还没有出现效果,这是因为有些像 lang="scss"
之类的预处理器无法正确解析,>>>
会不起作用,这种情况下你可以使用 /deep/
操作符取而代之——这是一个 >>>
的别名,同样可以正常工作。
.body ::v-deep img {
width: 100%;
object-fit: fill;
}
然后你会发现有效果了:
更多推荐
已为社区贡献26条内容
所有评论(0)