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

debugcn 发表于 Dev

马福蒂斯

我正在尝试以全屏模式显示图像预览，它的确显示了图像预览，但没有全屏显示。

代码和演示

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>

小提琴演示

如您在演示中所看到的，当我单击以预览模式查看图像时，它们将不会像在文档中一样以全屏显示，而是会显示在图像的顶部。

我该如何解决？

马福蒂斯

解决了

根据多一点点爱想法，我为图像制作了单独的列表，并在列表中集成了预览，而不是轮播项目。

这是我的最新代码：

<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"从我的轮播项目中删除。

这是最终结果截图：