不想写dialog组件也不想用第三方UI库?试试dialog标签吧

在前端日常开发中，对话框（Dialog）是一种常见的UI组件，用于在当前页面上向用户展示信息、获取用户输入或者进行简单的交互。如果你正在寻找一种简单的方式来实现对话框功能，而不想从头开始编写一个Dialog组件，或者不想引入第三方UI库，那么HTML5的<dialog>标签可能是一个不错的选择。

什么是<dialog>标签？

<dialog>是一个HTML5新增的元素，专门用于创建模态对话框。模态对话框是一种特殊类型的窗口，它要求用户必须首先与对话框交互后才能继续使用应用程序的其余部分。<dialog>标签提供了一种标记对话框内容的语义方式，并且很多浏览器已经支持这个标签。

如何使用

使用<dialog>标签非常简单。你只需要在你的HTML中添加一个<dialog>元素，并在其内部放置对话框的内容。例如：

<button onclick='myDialog.close()'>打开</button>
<button onclick='openDialog()'>打开</button>
<dialog id="myDialog">
  <p>这是一个对话框的内容。</p>
  <button onclick="myDialog.close()">关闭</button>
  //或者
  <button onclick="closeDialog()">关闭</button>
</dialog>

这样就创建了一个简单的对话框，它包含一段文本和一个关闭按钮,不过样式还需要自己修改。

控制对话框的显示和隐藏

默认情况下，<dialog>元素不会显示在页面上。你需要使用JavaScript来控制它的显示和隐藏。<dialog>元素有一个show()和hide()方法，你可以使用这些方法来控制对话框的显示状态。

// 使用点击事件直接打开
<div class='showDialog' onclick='myDialog.show()'></div>
//关闭
<div class='showDialog' onclick='myDialog.close()'></div>
// 也可以让dialog以模态框形式打开,会有遮罩层
<div class='showDialog' onclick='myDialog.showModal()'></div>
// 使用js打开
function openDialog(){
	document.getElementById('myDialog').show();
}
// 隐藏对话框
function closeDialog(){
	document.getElementById('myDialog').hide();
}

Vue中也可以控制对话框哦

如果你正在使用Vue.js，你可以很容易地将<dialog>标签集成到你的应用程序中，并使用Vue的响应式数据来控制对话框的显示和隐藏。

<template>
  <div id="app">
    <!-- 触发对话框显示的按钮 -->
    <button @click="showDialog = true">打开对话框</button>
    
    <!-- 对话框 -->
    <dialog v-if="showDialog" @click="showDialog = false">
      <p>这是一个对话框的内容。</p>
      <button @click="showDialog = false">关闭</button>
    </dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false
    };
  }
};
</script>

在这个Vue demo中，showDialog来控制对话框的显示。当showDialog为true时，对话框显示；当点击对话框或按钮时，showDialog被设置为false，对话框隐藏。

兼容性

在 Vue 中调用 <dialog> 标签的 showModal() 方法需要一些特殊的处理，因为 Vue 管理的 DOM 元素通常与 Vue 实例的数据绑定紧密相关。不过，可以通过ref 来调用 showModal() 方法，并通过 Vue 的数据绑定和事件监听来控制 <dialog> 标签的显示和隐藏。

<template>
  <div id="app">
    <!-- 触发打开对话框的按钮 -->
    <button @click="openDialog">打开对话框</button>

    <!-- 使用 ref 来引用原生的 <dialog> 元素 -->
    <dialog ref="myDialog">
      <p>这是一个对话框的内容。</p>
      <button @click="closeDialog">关闭</button>
    </dialog>
  </div>
</template>

<script>
export default {
  methods: {
    // 使用原生 JavaScript 调用 showModal 方法打开对话框
    openDialog() {
      this.$refs.myDialog.showModal();
    },
    // 关闭对话框的方法
    closeDialog() {
      this.$refs.myDialog.close();
    }
  }
};
</script>

ref 属性来引用 <dialog> 元素。ref 属性会创建一个指向该 DOM 元素的引用，并且这个引用可以通过 $refs 对象访问。在 openDialog 方法中，我们通过 this.$refs.myDialog.showModal() 调用了 <dialog> 标签的 showModal() 方法来打开对话框。同样地，在 closeDialog 方法中，我们调用了 this.$refs.myDialog.close() 来关闭对话框。

dialog标签官方文档点这里