element-plus中的el-image预览图片大小设置_elementuiplus中el-image-viewer

原生的el-image中的图片预览点开是全屏的

仔细观察就会发现它们其实是拿固定定位写在那里的,而基于我的实际需求,它们这些操作按钮离图片的太远,太不方便,用户体验不好.

1.我首先在页面vue文件中尝试了样式穿透方法,但是没生效
2.换一种思路直接在代码中找到它的样式文件直接修改:

基于vue3+ts项目,在scr下的style中找到 index.scss文件或者找到其他代表element的样式文件都可

.el-image-viewer__wrapper {

  position: absolute;

  .el-image-viewer__canvas {

    position: absolute;

    height: 70%;

    top: 10%;

  }

  .el-image-viewer__prev {

    left: 30%;//上一步的箭头由原本的固定值40px改为30%

  }

  .el-image-viewer__next {

    right: 30%;//下一步的箭头由原本的固定值40px改为30%

  }

  .el-image-viewer__close {

    right: 25%;关闭按钮x由原本的固定值40px改为25%

  }

}