问题描述:在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/深度作用选择器

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

Logo

前往低代码交流专区

更多推荐