vue 模态框 el-dialog 实现点击图片查看大图功能
<!-- 图片查看dialog --><img :src="item.content" class="avatar" @click="imgViewDialog_show(item)" /><el-dialog title :visible.sync="imgViewDialogVisible" class="imgView-dialog" :modal="fa...
·
<!-- 点击的图片 -->
<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);
},
}
更多推荐
已为社区贡献58条内容
所有评论(0)