1.使用v-html加载富文本，css样式不起作用

已于 2022-12-16 11:39:18 修改
阅读量2k 收藏
点赞数 1
分类专栏： 较复杂的问题集 文章标签： html css 前端 vue
于 2022-01-13 16:13:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35491739/article/details/122475649
版权

这里 使用v-html加载出的富文本，它的内部样式正常写法是无法改变的

这个时候就需要在这个class的或它的下级上加上/deep/来穿透样式

 这里的样式设置成功了，能更改图片的样式了，但是文字大小的样式却没有生效，这个原因是因为使用的v-html加载的富文本相当于写在element.style，也就是直接写在元素上，这种情况下可使用!important来改变样式的优先级，当然也可以用transform: scale()，以下是样式写法和完成后的图片：

qq_35491739
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中v-html样式不显示问题
weixin_45682701的博客
01-16 1824
html中引入vue，页面使用v-html方法时样式不显示问题；v-html主要基于vue-quill-editor；
uParse修复版优化表格css等html富文本加载
08-10
uParse修复版，优化表格，css等，html富文本加载
v-html插入html标签字符串时css不起效
weixin_63029264的博客
01-04 660
去掉styleb标签中的scope 属性，形成组件的全局样式，父dom标签添加class 类名防止影响其他组件的标签。插入前的dom上有data-v的标识，插入后的标签没有这个标识所以scope的样式不起效。
vue动态插入内容 v-html 的样式无效解决方法
撑起自己半边天
04-08 7608
vue动态插入内容 v-html 的样式无效解决方法
Vue 之 解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法
热门推荐
weixin_45092437的博客
09-05 1万+
通过官方文档可以得知两个重点：① 通过v-html生成的页面元素，不会被当做Vue模板进行编译，只会作为普通的html代码被插入，也就是说通过v-html插入的html@click、v-if等，则不会生效，因为他们没有被Vue编译，而浏览器并不会识别这些vue语法，所以这些语法都不生效。② 在.vue文件中如果style标签上增加了scoped属性，那么该标签内的样式就不会对v-html生成的页面元素起作用，还是因为这些元素没有被当做Vue模板进行编译，所以不生效。
vue3中v-html的代码样式不生效解决
langligelangxy的博客
07-27 2131
因为那部分 HTML 没有被Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局<style>元素手动设置类似 BEM 的作用域策略。不会应用在 v-html 内部，
Vue使用v-html获取文档后css样式不生效
米拉
06-08 4364
官方关于v-html的解释如下: 在单文件组件里，scoped的样式不会应用在v-html内部，因为那部分HTML没有被Vue的模板编译器处理。 解决方法: 1、去掉<style scoped>中的scoped，（不建议使用，会改变布局，导致组件之间样式冲突） <style> .content img{width:100%;height:auto;margin:.5rem auto;} .content .contentimg{width:100%;hei...
parse:uParse修复​​版，优化表格，css等，html富文本加载
03-15
app / mpvue的富文本解析组件支持Html，Markdown解析，Fork自： 对于某些html标签不闭合等渲染有问题的，如果是PHP推荐结合使用$ this-> m_dom = new DOMDocument（）;属性名称类型默认值描述userSelect 细绳文本...
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
10-15
但是，如果图标样式出现排布不整齐的情况，这可能是由于CSS样式没有正确加载导致的。 为了解决这个问题，我们需要引入`quill`编辑器的默认样式。在你的Vue组件中，可以在`<style>`标签内加入以下代码，导入`quill....
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
09-02
【bootstrap-wysiwyg富文本编辑器详解】 在网页开发中，富文本编辑器是必不可少的工具，它允许用户在浏览器端进行文本编辑并呈现HTML格式的内容。`bootstrap-wysiwyg`是一款轻量级、易用且功能丰富的富文本编辑器，...
微信小程序整合使用富文本编辑器的方法详解
10-17
本篇文章主要讲解如何在微信小程序中整合并使用富文本编辑器，特别是针对WxParse这个插件的集成。 WxParse是一个专门为微信小程序设计的富文本解析库，它能够将HTML或Markdown格式的内容转化为小程序可以识别的结构...
vue中给v-html返回的元素添加css样式
zyf971020的博客
03-09 902
vue中给v-html返回的元素添加css样式
解决vue3中设置的v-html的代码样式不生效的问题
时清云的博客
11-17 2059
在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被Vue 的模板编译器处理。如果你希望针对v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局。最近在做一个需求，遇到这样一个问题，接口返回的一段。这句话非常清楚地表明了没有生效的原因。内容的样式没有生效，这是什么情况？那我们怎么设置让它生效呢？渲染到页面的时候，发现在。
v-html 样式失效
最新发布
qq_43654065的博客
01-29 573
vue3使用:deep(){}，穿透标签，v-html中的样式就可以生效了。标签使用了v-html，但是渲染的HTML标签中的样式并没有生效。
v-html设置样式不生效
FantasyBreaker的博客
02-02 2371
1.由于scoped影响，导致v-html设置样式不生效；可以去掉scoped，不推荐，导致样式混乱；也可以在全局style样式中设置样式，当前组件仍使用scoped样式。 2.使用深度>>> 或/deep/ 样式选择器，进行scoped穿透。 3.外嵌一层，在外层上设置某些样式。 ...
vue中解决html2canvas图片跨域问题
jarisMA的博客
07-29 891
vue中解决html2canvas图片跨域问题 html2canvas在截图的过程中，如果遇到html中有跨域地址的图片，即图片地址非本地，截图的时候将不会显示图片 解决方法： html <div ref="imageDom"> <!-- 支持跨域的地址 --> <img :src="imgUrl+'?'+new Date().getTime()"...
HTML引入外部css失效解决
qq_43211318的博客
03-27 4751
这个问题，困惑我好久，但是偶然间想起是不是路径不对，然后我发现了只要在href中加入../即可，例： 解决一： <link rel="stylesheet" href="css/first.css"> 这个是我写的，但是他是失效的，解决方法如下： <link rel="stylesheet" href="../css/first.css"> 就是这样。具体原理大概就是文件夹有点多，他找不到，然后给他开个门出去找， 解决2：既然HTML找不到css文件，那么我把HTML文件
vue中使用v-html加载的富文本，css中定义样式不生效
weixin_38673922的博客
09-02 844
p>>> img{ display:block; max-width: 100%}
若依 vue Quill插件富文本框，文字大小设置，后台生效，手机端不生效问题
hexu_blog的博客
12-03 4378
原因，后台设置的样式，并没有加载到手机端而已，未设置情况下，查看Html class="large-xx-xx"设置后台之后： style="font-size:64px";如下是我们需要得到的文字大小和字体的效果:自定义字体、文字大小JS部分： 自定义字体、文字大小css部分 组件完整代码（含element上传组件功能）：
v-html css
09-01
v-html是Vue.js的一个指令，用于在页面中渲染一段纯HTML代码。然而，使用v-html会导致所有样式失效。为了解决这个问题，有两种方法可以应用样式到v-html元素上。 第一种方法是使用scoped样式，在style标签中添加 scoped 属性，并使用适当的选择器和样式来定义v-html元素的样式。例如，可以使用以下方式来定义表格的样式： ```html <style scoped lang="less"> .content-html{ /* table 样式 */ table { border-top: 1px solid #ccc; border-left: 1px solid #ccc; } table td, table th { border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 3px 5px; } table th { border-bottom: 2px solid #ccc; text-align: center; } } </style> ``` 然而，这种方式在v-html中应用样式时会失效。因此，我们可以使用第二种方法，即使用/deep/关键字或>>>操作符（在Vue 2.2.0之前）来穿透父级样式，实现对v-html元素的样式应用。例如： ```html <style scoped lang="less"> .content-html{ /* table 样式 */ /deep/ table { border-top: 1px solid #ccc; border-left: 1px solid #ccc; } /deep/ table td, table th { border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 3px 5px; } /deep/ table th { border-bottom: 2px solid #ccc; text-align: center; } } </style> ``` 这样，样式就可以正确地应用到v-html元素上了。 但是需要注意的是，使用v-html加载的富文本相当于直接写在元素上的style，这会导致样式优先级的问题。如果遇到文字大小的样式没有生效的问题，可以使用!important来提高样式的优先级，或者使用transform: scale()来调整样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [【vue】关于v-html内容中css样式失效解决办法](https://blog.csdn.net/coralime/article/details/114288686)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [1.使用v-html加载富文本，css样式不起作用](https://blog.csdn.net/qq_35491739/article/details/122475649)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值