问题描述:
在使用富文本编辑图文详情的时候,通常会使用v-html引入所编辑的内容,然而,详情显示的样式有时不是我们希望的(尤其是图片,大图会出现溢出内容区域的问题),在<style scope> 中添加样式却并不生效。
原因分析:
以下摘自vue官方文档:
在单文件组件里,
scoped
的样式不会应用在v-html
内部,因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对v-html
的内容设置带作用域的 CSS,你可以替换为 CSS Modules 或用一个额外的全局<style>
元素手动设置类似 BEM 的作用域策略。
解决方法:
使用css中的 >>> 选择器
注:该选择器在less和scss中是无效的(貌似在less中还会报错),应使用css。
示例代码如下:
<template>
<div class="wap-card">
<div class="card-title">图文详情</div>
<div class="notes-cont" style="min-height: 100px" v-html="data.bookDetail">
</div>
</div>
</template>
<style scope>
.notes-cont >>> ul > li {
list-style-type: disc;
margin-left: 15px;
}
.notes-cont >>> img {
max-width: 100%;
height: auto;
}
</style>