优秀的富文本编辑器vue通过v-html指令渲染的富⽂本⽆法修改样式的解决⽅
案
1.问题描述
在最近的vue项⽬中遇到的问题：v-html渲染的富⽂本，⽆法在样式表中修改样式。
代码如下，div.article-context⾥⾯的图⽚修改成⾃适应，但是没有任何效果。
<div class="article-context" v-html="t"></div>
<style scoped>
.article-context img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
</style>
2.分析原因
这是为什么呢？原因很简单：如果图⽚（img标签）在template中先写出来，那么在<style>标签中是可以修改其样式的。
我猜，这应该是vue编译的规范吧，未在虚拟dom中渲染的元素⽆法修改样式。
3.解决⽅案
解决⽅案1（推荐）：在updated⽣命周期函数中，js动态设置样式，代码如下：
<script>
import $ from 'jquery'
export default {
updated() {
$('.article-context').find('img').css({
"width": "auto",
"height": "auto",
'max-width': '100%',
'max-height': '100%'
});
}
</script>
解决⽅案2（不推荐）：去掉style标签中的scoped属性；⾄于原因？没有仔细研究，我在使⽤过程出现富⽂本编辑器⽆法初始化的问题。
<style>
.article-context img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
</style>
到此这篇关于vue通过v-html指令渲染的富⽂本⽆法修改样式的解决⽅案的⽂章就介绍到这了，更多相关vue v-html富⽂本⽆法修改内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。