vue3 弹框组件使用

Vue3中的弹框组件通常用于显示临时信息或者需要用户确认的操作，比如模态框、警告提示等。常用的第三方库有Quasar UI、Element Plus或Vuetify等，它们都提供了丰富的弹框组件。

以下是使用Element Plus库为例创建一个简单的弹框组件的步骤：

1. 首先，你需要安装Element Plus库：

npm install element-plus -S

2. 在你的`main.js`或`setup()`文件中引入并注册Element Plus：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'

createApp(App).use(ElementPlus)

3. 使用Element Plus的`el-dialog`组件。例如，创建一个点击按钮打开弹框并关闭的例子：

<template>
  <button @click="showModal">点击打开弹框</button>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    :close-on-click-modal="false"
  >
    <p>这是一个弹框内容...</p>
    <el-button slot="footer" @click="handleClose">关闭</el-button>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false) // 弹窗是否可见
const dialogTitle = "这是一段标题"

function showModal() {
  dialogVisible.value = true
}

function handleClose() {
  dialogVisible.value = false
}
</script>

在这个例子中，`v-model`绑定了`dialogVisible`的值来控制弹框的显示隐藏，`@click`事件处理函数分别对应于打开和关闭弹框操作。