vue中富文本样式设置不生效解决方案
问题描述:在vue中通过v-html回显富文本内容,遇到了设置富文本样式不生效问题;原因:<style>标签添加了scoped属性;解决方案:1. 去掉<style>标签的scoped属性;2.使用 /deep/深度作用选择器 (案例如下);案例代码:html:<div class="fwb" v-html="htmlVal">&...
   ·  
 问题描述:在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/深度作用选择器
以上仅为个人使用过的方案,如有疑问或更好方案欢迎留言交流!
更多推荐
 


所有评论(0)