vue中富文本样式设置不生效解决方案

问题描述：在vue中通过v-html回显富文本内容，遇到了设置富文本样式不生效问题；

原因：<style>标签添加了scoped属性；

解决方案：1. 去掉<style>标签的scoped属性； 2.使用 /deep/深度作用选择器 (案例如下)；

 

案例代码：

html：

<div class="fwb" v-html="htmlVal">
</div>

javascript：

<script>
export default {
    data() {
        return {
            htmlVal: '<div><p>富文本测试文案</p><img src="//www.baidu.com/img/baidu_jgylogo3.gif" alt=""></div>'
        }
    },
}
</script>

style：

.fwb{
    width: 300px;
    height:300px;
    border: 1px solid #333;
    // 在需要设置样式的富文本dom样式前添加 /deep/
    /deep/
    img{
        margin-top:50px;
        width:100%;
    }
}

效果：

 

ps: 点击查看/deep/深度作用选择器

以上仅为个人使用过的方案，如有疑问或更好方案欢迎留言交流！