Open summerpen opened 2 years ago
自定义样式后,大屏预览图片,位置显示异常, 没有在容器的中央, viewer-canvas 下的img标签,margin-top margin-left异常 没有安装上一个容器计算
viewer-canvas
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; } } }
viewerjs在实现过程中没有完全使用容器尺寸,而是部分使用了窗口尺寸,修改样式是可能导致类似问题。但v-viewer只是个壳子,没有涉及这部分逻辑,需要去viewerjs上提issue了。 https://github.com/fengyuanchen/viewerjs/issues
嗯呢,得去viewerjs提issue 我试了一下,只使用viewerjs也会出现这个问题
自定义样式后,大屏预览图片,位置显示异常, 没有在容器的中央,
viewer-canvas
下的img标签,margin-top
margin-left
异常 没有安装上一个容器计算