vue爬坑 div中使用v-html，里面的图片溢出问题；

最近项目中，有这样一个需求，点击按钮弹出框显示详情内容，内容是html，我使用的是div的v-html，来显示；最初，只是测试的纯文字，在开发完毕自测的时候，顺手添加了几张图片，这才发现，图片溢出；最初的代码如下：

<div class="dialog-content" v-html="dialogContent"></div>

对应的css代码如下：

<style lang="scss" scoped>.dialog-content {height: 400px;width:500px;}
</style>

溢出图片如下：

这个原因很简单，HTML样式问题；知道原因，那么修改样式啊；起初是直接在 style 里面写相应的样式，卵用没有；网上搜索了一下，发现有老哥也是遇到了这个问题，同时结合官方说法，说是使用 scoped后，父组件的样式将不会渗透到子组件中。从而造成这个问题，但是不使用scoped，又会造成css的污染；不过vue的深度作用选择器来了，如果你希望 scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>>操作符，可以解决这一问题；
修改后的代码：

 <div class="dialog-content" ><div class="dialog-h5" v-html="dialogContent"></div></div>

修改后的css代码：

<style scoped>
.dialog-content {height: 400px;overflow-y:auto;overflow-x:hidden;width: 500px;
}.dialog-h5 >>> img,p,span {width: 100%;
}
</style>

修改后的无异常图片：

ps：加个dialog-content 是给内容个固定高度；弹出框使用的是饿了么的组件

有些像 lang="scss"之类的预处理器无法正确解析，>>>会不起作用，这种情况下你可以使用 /deep/操作符取而代之——这是一个 >>>的别名，同样可以正常工作。

<style lang="scss" scoped>
.dialog-content {height: 400px;overflow-y:auto;overflow-x:hidden;width: 500px;// 深度处理::v-deep img, ::v-deep p, ::v-deep span {width: 100%;}/*//上面的写法可以换成下面::v-deep {img,p,span {width: 100%;}}*/
}
</style>

vue官方文档地址

vue爬坑 div中使用v-html，里面的图片溢出问题；相关推荐

Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目
Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https: ...
Vue 爬坑之旅 -- 微信网页授权
现在的 H5 开发,微信授权和微信分享基本是必备功能,昨天将微信分享的相关功能和踩坑过程做了一个总结,今天就来说下微信授权的功能具体到 vue 项目中该要怎么做. Vue 爬坑之旅 – history ...
Vue 爬坑之路（六）—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
VUE 爬坑之旅 -- 用 ES6 语法写一个工具类，并全局引用
在我前面的有一篇文章里有说过怎么引入外部的 JS 文件,详情见 VUE 爬坑之旅– 如何对公共JS,CSS进行统一管理,全局调用 .这里所说的外部 JS 文件指的是用 ES6 之前的老语法编写的各种 ...
Vue由本地js中存放的url地址获取图片
Vue由本地js中存放的url地址获取图片对象必须放在js中(而不是json里面,json没有require).如果是在json中,需要采用其他方式去获取注意:url地址必须用这种形式,有requ ...
el+vue实战 ② 在el-table中的每一行加上头像/图片；去掉div标签自动换行问题；el-table表格中实现字数限制，只显示一行
处理之前: 处理之后: 1.在el-table中的每一行加上头像/图片 <el-table-column prop="customerName" label="姓名 ...
Vue 爬坑之路（十）—— Vue2.5 + Typescript 构建项目
Typescript 在前端圈已经逐渐普及,Vue 2.5.0 改进了类型声明,使得对 TypeScript 更加友好不过要想在项目中直接使用 TypeScript 仍然需要对项目进行一些改造 P ...
（转）Vue 爬坑之路（四）—— 与 Vuex 的第一次接触
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...
Vue 爬坑之路（四）—— 与 Vuex 的第一次接触
2019独角兽企业重金招聘Python工程师标准>>> 在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 htt ...

vue爬坑 div中使用v-html，里面的图片溢出问题；

vue爬坑 div中使用v-html，里面的图片溢出问题；相关推荐

最新文章

热门文章