element ui image preview not show in full screen

user_8490993 0
Viewed 1980

I'm trying to get my image preview in full screen, it does show image preview but not in full screen.

Code and Demo

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

As you see in my demo, When I click to see my images in preview mode they won't show in full screen as in documents , instead they just show on top of my images.

How can i fix it?

element-ui vuejs2 vue.js javascript
1 Answers

Solved

Based on 多一点点爱 idea I've made separate list of my images and integrated previews on that list instead of my carousel items.

Here is my latest code:

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

What I did was adding this part below my 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>

And removed :preview-src-list="srcList" from my carousel items.

here is final result screenshot:

one

Hope it can help others as well.

user_84909930
Related