vue 图片点击放大查看大图（element-ui与vant）

性野喜悲

已于 2023-05-05 18:50:16 修改

阅读量1.5k

点赞数

文章标签： vue.js 前端 Powered by 金山文档

于 2023-03-21 17:31:22 首次发布

本文链接：https://blog.csdn.net/leng0920/article/details/129692914

版权

手机版（使用vant）

未放大效果：

点击放大后的效果：

html:

    <div class="distribution-map-area">
 
      <div class="content">
        <van-tabs
          v-model="distributionMap"
          line-width="1.8rem"
          background="transparent"
          color="#0743EA"
          title-active-color="#0743EA"
        >
          <van-tab
            :title="item.title"
            v-for="(item, index) in mapList"
            :key="`map_${index}`"
          >
            <img style="width: 500px;height: 500px;" :src="item.img" @click="previewImg(item.img)" alt="" />
          </van-tab>
        </van-tabs>
      </div>
    </div>

js:

<script>

import { ImagePreview } from "vant";


export default {
  name: "m-index",
  components: {

  },
  computed: {},
  data() {
    return {
     distributionMap: 0,
      mapList: [
        {
          title: "会场平面分布图",
          img: `${this.JTLM_IMG_HOST}/venue_map2022_01.png`,//图片地址
        },
        // {
        //   title: '展区平面分布图',
        //   img: `${this.JTLM_IMG_HOST}/venue_map2022_2.png`
        // },
      ],
     
    };
  },
  created() {
   
  },
  mounted() {
 
  },
  methods: {
   //点击放大查看图片
    previewImg(url) {
      ImagePreview([url]);
    },
  //直接使用（html+vue+vant可使用此写法）
    previewImg(url) {
                    vant.ImagePreview({
                        images: [url],
                    });
                },
  },
};
</script>

pc端：

html:

     <div class="conference-distribution-map-cont">
        <div
          class="conference-distribution-map-item-cont"
          v-for="(item, index) in mapCont"
          :key="index"
          v-show="mapIdx == index"
        >
          <el-image
            class="conference-distribution-map-item-img"
            :src="item.img"
            :preview-src-list="item.darkImgList"
          >
          </el-image>
        </div>
      </div>

js:

<script>
import comItemTitle from "@/components/common/com-item-title.vue";
import globals from "@/assets/js/global_val.js";
export default {
  name: "conference-distribution-map",
  components: {
    comItemTitle,
  },
  data() {
    return {
      mapCont: [
        {
          img: `${this.JTLPC_IMG_HOST}/venue_map2022.png?v=${globals.timeStamp}`,
          darkImgList: [
            `${this.JTLPC_IMG_HOST}/venue_map2022.png?v=${globals.timeStamp}`,
          ],
        },
       
      ],

    };
  },
  computed: {},
  watch: {},
  methods: {
  
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>