el-image 大圖預覽 顯示效果異常的問題
先看下現象:
| 理想效果 |
實際效果 |
|
|
|
發現問題的時候,第一步想到的是去看文檔,檢查是不是有那些參數沒有用到。看到最后發現了問題所在,大圖預覽的界面無法綁定到body
<div class="detail_style">
<div class="detail_style_content">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="檔案詳情" name="docDetail">
<div class="tab_content">
<div class="tab_content_header">
<div class="tab_pics_arr">
<el-carousel height="200px" indicator-position="outside">
<el-carousel-item v-for="(img,index) in imgs" :key="index">
<el-image
style="width: 240px"
:preview-src-list="imgs.map(img => img.src)"
:src="img.src"
:alt="img.alt"
:max-scale="7"
:min-scale="0.2"
:hide-on-click-modal="true"
:close-on-press-escape="true"
/>
</el-carousel-item>
</el-carousel>
</div>
</div>
所以需要用到文檔中的:preview-teleported

其他參數根據個人需要,自由發揮就好


浙公網安備 33010602011771號