vue 模态框 el-dialog 实现点击图片查看大图功能

element-ui 同时被 2 个专栏收录
19 篇文章 1 订阅
92 篇文章 14 订阅

在这里插入图片描述


<!-- 点击的图片 -->
<img :src="item.content" class="avatar" @click="imgViewDialog_show(item)" />

<!-- 弹出dialog大图 -->
<el-dialog title :visible.sync="imgViewDialogVisible" class="imgView-dialog" :modal="false">
	<div class="main">
		<img class="img" width="100%" :src="imgViewDialog_imgSrc" />
    </div>
</el-dialog>
data(){
	return{
		imgViewDialogVisible: false, // 控制dialog显示隐藏
      	imgViewDialog_imgSrc: "" // 控制图片src
	}
},

methods: {
    /**
     * 图片dialog_显示
     */
    imgViewDialog_show: function(item) {
      this.imgViewDialogVisible = true;
      this.imgViewDialog_imgSrc = item.src;
    },
    /**
     * 图片dialog_关闭
     */
    imgViewDialog_close: function() {
      this.imgViewDialogVisible = false;
      var self = this;
      setTimeout(function() {
        self.imgViewDialog_imgSrc = "";
      }, 100);
    },
  • 2
    点赞
  • 4
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值