最近项目中,有这样一个需求,点击按钮弹出框显示详情内容,内容是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官方文档地址

Logo

前往低代码交流专区

更多推荐