element el-image，图片预览，::v-deep 样式穿透修改样式不生效？当前是`vue2`的项目？

站长

2024年06月28日 08:14 · 阅读数 18

element el-image，图片预览，::v-deep 样式穿透修改样式不生效？当前是vue2的项目？

<style lang="scss" scoped>
::v-deep .el-image-viewer__wrapper .el-image-viewer__canvas {
  width: 80% !important;
  height: 80% !important;
}
<style>

    "vue": "^2.6.11",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",

1个回答

test

2024-06-28

可以使用::v-deep设置，你要打开f12，看下预览的dom结构呢，如果结构层级有问题，这样设置是不起作用的，可以单独写个style，里边设置预览样式。

刚才看了下dom结构，预览的dom和app是平级， answer image

所以可以直接设置

<style lang="scss">
.el-image-viewer__wrapper .el-image-viewer__canvas {
  width: 80% !important;
  height: 80% !important;
}
</style>

适合作为回答的

不该作为回答的

element el-image，图片预览，::v-deep 样式穿透修改样式不生效？ 当前是`vue2`的项目？