用vue3写一段用按钮打开模态框的代码

以下是用Vue 3写的一个简单示例，展示如何使用按钮打开模态框：

<template>
  <div>
    <button @click="showModal = true">打开模态框</button>
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <h2>模态框标题</h2>
        <p>这是模态框的内容</p>
        <button @click="showModal = false">关闭模态框</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  name: "ModalButton",
  setup() {
    const showModal = ref(false);

    return { showModal };
  },
};
</script>

<style>
.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
</style>

在上面的代码中，我们使用了Vue 3提供的`ref`函数来创建一个响应式数据`showModal`，它用于控制模态框的显示和隐藏。当用户点击按钮时，我们将`showModal`的值设置为`true`，模态框就会显示出来。当用户点击模态框内的关闭按钮时，我们将`showModal`的值设置为`false`，模态框就会关闭。