使用element-ui组件中el-dialog做一个简单的图片预览
<div class="block" @click="preview">
// 展示图片 使用的Avatar头像组件
<el-avatar shape="square" :size="100" :src="images"></el-avatar>
</div>
//:visible.sync 绑定dialogVisible变量
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="images" alt="" />
</el-dialog>
data(){
return {
images:'',
dialogVisible: false //对话框默认隐藏
};
}
methods:{
//触发方法显示
preview(){
this.dialogVisible = true
},
}
<style>
.el-avatar{
background-color: none; //去掉el-avatar原生背景颜色
}
</style>