效果
点击图片,显示大图,点击大图,关闭dialog;不想写组件,查了下h5,发现dialog标签能实现我想要的效果
注意
dialog标签只有Chrome、Safari 6 支持;
template
<dialog class="dialog" :open="dialog" v-if="bigPicture[0]">
<img :src="bigPicture[0].content" @click="closeDialog()" alt>
</dialog>
js
data () {
return {
dialog: false
}
},
methods: {
showBig (chat) {
this.dialog = true
},
closeDialog () {
this.dialog = false
}
样式
效果是设置dialog的边框,和设置图片的最大值,超过最大值自动按原图比例缩放
.dialog {
z-index: 6;
border: solid white 1px;
img {
width: auto;
height: auto;
max-width: 600px;
max-height: 500px;
// transform:scale(0.8)
}
}