要想渲染富文本,只需要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;
}

然后你会发现有效果了:

 

Logo

前往低代码交流专区

更多推荐