vue element图片预览效果

最新推荐文章于 2024-08-22 19:25:52 发布

狗_都不做前端

最新推荐文章于 2024-08-22 19:25:52 发布

阅读量814

点赞数

分类专栏： js vue 文章标签： vue js java

本文链接：https://blog.csdn.net/weixin_44423437/article/details/109449650

版权

js 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

vue

11 篇文章 2 订阅

订阅专栏

<template>
  <div class="home">
    

    <div class="imglist" v-for="(item, index) in imgdata" :key="index">
      <h1>{{index}}</h1>
      <el-image
        @click="lookMaxImg(item,i)"
        style="width: 100px; height: 100px"
        :src="it"
        v-for="(it, i) in item"
        :key="i"
      ></el-image>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <div class="block">
       
        <el-carousel trigger="click" width='400px' height="300px" :initial-index="imgindex" :loop="false" :autoplay='false' indicator-position="none">
          <el-carousel-item v-for="item in imglist" :key="item">
            <img :src="item" alt="" style="width:400px;height:300px">
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      imglist:[],
      imgindex:0,
      dialogVisible:false,
      imgdata: [
        [
          "http://www.jyb.cn/photo2/gnjy/201612/W020161223347930742722.jpg",
          "https://up.enterdesk.com/edpic_360_360/30/fb/bb/30fbbbde5026e69017c9a805bdf5ca31.jpg",
          "https://up.enterdesk.com/edpic_360_360/c4/50/53/c45053b757589e77bc4d1f76150cf4c6.jpg",
        ],
        [
          "https://up.enterdesk.com/edpic_360_360/68/e3/a6/68e3a6316182ca77b01d6bf49fe7e5d6.jpg",
          "https://up.enterdesk.com/edpic_360_360/17/e4/08/17e4084422af1ba5cc012743faa72b59.jpg",
          "https://up.enterdesk.com/edpic_360_360/59/75/2a/59752a3e198d88655abfe03b45c0b6e1.jpg",
        ],
      ],
    };
  },
  methods:{
    lookMaxImg(imglist,index){
       this.imglist = imglist
       this.imgindex = index
       this.dialogVisible = true
    },
    handleClose(){
       this.imglist = []
       this.dialogVisible = false
    }
  }
};
</script>