手机版(使用vant)
未放大效果:
![vue点击图片查看大图,vue.js,前端,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2023/10/716475-1.png)
点击放大后的效果:
![vue点击图片查看大图,vue.js,前端,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2023/10/716475-2.png)
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>
文章来源地址https://www.toymoban.com/news/detail-716475.html
文章来源:https://www.toymoban.com/news/detail-716475.html
到了这里,关于vue 图片点击放大查看大图(element-ui与vant)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!