vue通过v-html指令渲染的富文本无法修改样式的解决方案


Posted in Javascript onMay 20, 2020

1.问题描述

在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式。

代码如下,div.article-context里面的图片修改成自适应,但是没有任何效果。

<div class="article-context" v-html="post.content"></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富文本无法修改内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
javascript add event remove event
Apr 07 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
js实现微博发布小功能
Jan 12 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
精读《Vue3.0 Function API》
May 20 #Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 #Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 #Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 #Javascript
vue模块移动组件的实现示例
May 20 #Javascript
vue父子组件间引用之$parent、$children
May 20 #Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 #jQuery
You might like
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
学习ExtJS form布局
2009/10/08 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
Windows下搭建python开发环境详细步骤
2020/07/20 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Django实现单用户登录的方法示例
2019/03/28 Python
Python中psutil的介绍与用法
2019/05/02 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
python在不同条件下的输入与输出
2020/02/13 Python
如何使用repr调试python程序
2020/02/28 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
自我鉴定范文300字
2013/10/01 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
产品销售计划书
2014/05/04 职场文书
演讲比赛策划方案
2014/06/11 职场文书
结对共建协议书
2014/08/20 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
交通处罚决定书
2015/06/24 职场文书
工作后的感想
2015/08/07 职场文书
Java无向树分析 实现最小高度树
2022/04/09 Javascript
使用Python开发冰球小游戏
2022/04/30 Python