dialog实现的模态框

 自己写模态框总是遇到层级之类的问题，用dialog元素包裹模态框元素，他会生成一个弹窗，

并且他是在页面渲染完毕后又从新独立渲染的，永远层级都是最高的，不用担心层级问题

它还自带了显示和关闭的方法，只需要去调用就行

并且他也有实现模态框的方法showModal()

<template>
  <div>
    <button @click="show()">模态框</button>
    <dialog ref="dialog">
    <div class="">
      <p>懒加载</p>
      <button @click="lazyimg(imgs)">开始</button>
      <button @click="close()">关闭</button>
    </div>
  </dialog>
  </div>
   <div class="imgWrap">
    <img src="../assets/three.png" :data-src="'https://picsum.photos/300/500?r=' + id" alt=""  v-for="id in num" key="id" ref="imgs">
   </div>
</template>
<script setup>
import { ref ,onMounted} from 'vue'
import lazyimg from '../imagelazy'
let num = ref(100)
let imgs = ref(null)
let dialog = ref(null)
onMounted(()=>{
  // 图片懒加载
  // lazyimg(imgs.value)
})
let show = ()=>{
  // show方法普通弹窗 showModal方法模态窗
  dialog.value.showModal()
}
let close = ()=>{
  // 关闭弹窗
  dialog.value.close()
}




</script>
<style scoped>
.read-the-docs {
  color: #888;
}
img{
  width: 200px;
  height: 160px;
}
.imgWrap{
  width: 820px;
  margin: 0 auto;
}

</style>