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

<!-- 点击的图片 -->
<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);
    },
｝