vue使用dialog标签

效果

点击图片，显示大图,点击大图，关闭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)
  }
}

欢迎留言交流