h5 新标签 dialog

2023-06-08 22:30:20

<script lang="ts" setup>
import { ref } from 'vue'

const dialogRef = ref()

const clickBtn = () => {
  dialogRef.value.showModal()
}

const closeDialog = () => {
  dialogRef.value.close()
}
</script>
<template>
  <div class="">
    <button @click="clickBtn" class="btn">点击我打开弹框</button>
    <dialog ref="dialogRef" rounded w-500px h-300px>
      <div flex justify-end>
        <button @click="closeDialog" rounded border-1px border-solid px-6px>
          X
        </button>
      </div>
      <div>123123</div>
      <div>123123</div>
      <div>123123</div>
      <div>123123</div>
    </dialog>
  </div>
</template>

浏览器原生自带的一个标签，实现了原生的模态框，有自己的 API 可以调用，比如可以通过 show()方法打开一个弹框，再通过 close()方法或者 ESC键 关闭，

h5 新标签 dialog ​

h5 新标签 dialog