自定义viewer-canvas 样式后, 预览图片显示位置异常

[summerpen]

自定义样式后,大屏预览图片,位置显示异常, 没有在容器的中央, viewer-canvas 下的img标签,margin-top margin-left异常 没有安装上一个容器计算

<viewer
                v-if="item1.suffix != 'mp4' && item1.suffix != 'mov'"
                :images="item1.url"
                class="item"
                :options="options"
                ref="viewer"
              >
                <img :src="item1.url[0]" />
                
              </viewer>

  created() {
    this.options = {
      container: '#app',
      className: 'img-preview',
      title: false,
    }
  },

.img-preview {
  &.viewer-transition {
    .viewer-canvas {
      height: auto;
      width: 1000px;
      background: rgba(0, 0, 0, 1) !important;
      opacity: 1;
      // left: 50%;
      // bottom: 104px;
      // right: none;
      // transform: translateX(-50%);
      // display: flex;
      // align-items: center;
      // justify-content: center;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      vertical-align: middle;
      img {
        max-width: 800px !important;
      }
    }
    .viewer-footer {
      width: 1000px;
      background: rgba(0, 0, 0, 1);
      opacity: 0.8;
      left: 50%;
      transform: translateX(-50%);
    }
    .viewer-toolbar {
      padding: 32px 0;
      & > ul {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        margin: initial;
        padding: 0;
      }
      .viewer-zoom-in,
      .viewer-zoom-out,
      .viewer-one-to-one,
      .viewer-reset,
      .viewer-play.viewer-large,
      .viewer-flip-horizontal,
      .viewer-flip-vertical {
        display: none;
      }
    }
    .viewer-navbar {
      display: none;
    }
    .viewer-button {
      width: 34px;
      height: 34px;
      background: #44c0fe;
      border-radius: 50%;
      top: 16px;
      right: 16px;
      padding: 1px;
      z-index: 999;
    }
    .viewer-button::before {
      bottom: 7px;
      left: 7px;
      position: absolute;
    }
  }
}

[mirari]

viewerjs在实现过程中没有完全使用容器尺寸，而是部分使用了窗口尺寸，修改样式是可能导致类似问题。但v-viewer只是个壳子，没有涉及这部分逻辑，需要去viewerjs上提issue了。 https://github.com/fengyuanchen/viewerjs/issues

[summerpen]

嗯呢,得去viewerjs提issue 我试了一下,只使用viewerjs也会出现这个问题