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/深度作用选择器
以上仅为个人使用过的方案,如有疑问或更好方案欢迎留言交流!
更多推荐
已为社区贡献11条内容
所有评论(0)