Элемент предварительного просмотра изображения не отображается в полноэкранном режиме

Question

Я пытаюсь получить предварительный просмотр изображения в полноэкранном режиме, он показывает предварительный просмотр изображения, но не в полноэкранном режиме.

Код и демонстрация

var Main = {
  data() {
    return {
      srcList: [
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      ],
      photos: [
      	'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      ],
    }
  },
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
    <el-main>
        <!-- gallery -->
        <el-col :xs="24" :sm="24" :md="{span: 18, offset: 3}" :lg="{span: 18, offset: 3}" :xl="{span: 18, offset: 3}">
            <el-card shadow="always" :body-style="{ padding: '0px' }">
                <el-row class="mt-5" :gutter="10">
                    <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" class="text-center mb-3">
                        <div v-if="photos!=undefined && photos.length > 0">
                            <el-carousel trigger="click" type="card">
                                <el-carousel-item v-for="(item, key) in photos" :key="key">
                                    <h3 class="medium">
                                        <el-image
                                        class="image"
                                        :src="item"
                                        style="height:270px;"
                                        :alt="item.caption"
                                        :key="item.id"
                                        :preview-src-list="srcList"></el-image>
                                    </h3>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </el-col>

                </el-row>
            </el-card>
        </el-col>
    </el-main>
</div>

Демонстрация Fiddle

Как вы видите в моей демонстрации, Когда я нажимаю, чтобы увидеть мои изображения в в режиме предварительного просмотра они не будут отображаться в полноэкранном режиме, как в документах , вместо этого они просто отображаются поверх моих изображений.

Как это исправить?

Answer 1

Решено

Основываясь на идее 多一点点爱, я создал отдельный список своих изображений и встроенных превью для этого списка вместо элементов карусели.

Вот мой последний код:

<el-carousel trigger="click" type="card" height="270px">
    <el-carousel-item v-for="(item, key) in product.photos" :key="key">
        <h3 class="medium">
            <el-image
            class="image"
            :src="item.photo"
            style="height:270px;"
            :alt="item.caption"></el-image>
        </h3>
    </el-carousel-item>
</el-carousel>
<ul class="list-inline">
    <li class="list-inline-item" v-for="(item, key) in product.photos" :key="key">
        <el-tooltip class="item" effect="dark" content="Click to see fullscreen" placement="bottom">
            <el-image
                class="image"
                :src="item.photo"
                style="width: 30px; height: 30px"
                :alt="item.caption"
                :key="item.id"
                :preview-src-list="srcList"></el-image>
        </el-tooltip>
    </li>
</ul>

Я добавил эту часть под каруселью

<ul class="list-inline">
    <li class="list-inline-item" v-for="(item, key) in product.photos" :key="key">
        <el-tooltip class="item" effect="dark" content="Click to see fullscreen" placement="bottom">
            <el-image
                class="image"
                :src="item.photo"
                style="width: 30px; height: 30px"
                :alt="item.caption"
                :key="item.id"
                :preview-src-list="srcList"></el-image>
        </el-tooltip>
    </li>
</ul>

И удалил :preview-src-list="srcList" из элементов карусели.

вот скриншот окончательного результата:

Надеюсь, что это может помочь и другим.

Answer 2

Под влиянием элемента transform отцов