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官方文档地址