元素 ui 图像预览未全屏显示

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 Demo

正如您在我的演示中看到的那样，当我在预览模式下单击查看我的图像时，它们不会像 documents 那样全屏显示，而是只显示在我的图像之上。

我该如何解决？

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"。

这里是最终结果截图：

希望对其他人也有帮助。

元素 ui 图像预览未全屏显示

element ui image preview not show in full screen

javascript

vue.js

vuejs2

element-ui

代码和演示

已解决