el-image局部显示（不全屏遮罩）

需要修改遮罩层的定位，使用绝对定位，设置遮罩层的大小，注意样式修改需要是全局样式，不能用scoped

<style lang="scss">
  .el-image-viewer__wrapper {
    position: absolute!important;
    top: 70px!important;
    left: 300px!important;
    width: calc(50% - 150px)!important;
    overflow: hidden;
  }
</style>

 

如果需要动态改变遮罩大小，需要用js去控制，可以如下操作

js部分：

if (true) {
   document.getElementsByClassName('el-image-viewer__wrapper')[0].style.setProperty("--imgWidth", 2)
} else {
　　document.getElementsByClassName('el-image-viewer__wrapper')[0].style.setProperty("--imgWidth", 1)
}

css部分：

    //--imgWidth为变量,必须以--开头，否则其它页面使用这个变量不会生效
    $imgWidth: var(--imgWidth, 2); // 侧边导航宽度
    .el-image-viewer__wrapper {
        position: absolute !important;
        top: 70px !important;
        left: 300px !important;
        width: calc((100% - 300px) / #{$imgWidth}) !important;  //在calc中使用变量，变量需要用 #{ }括起来，才能编译成变量，否则会编译成字符串
        overflow: hidden;
    }