naive-ui弹出框

Naive-UI 是一款基于 Vue.js 的 UI 组件库，它提供了弹出框（Dialog）组件用于显示模态框。要使用 Naive-UI 的弹出框，你需要先安装并引入 Naive-UI 的相关依赖。

以下是一个使用 Naive-UI 弹出框的简单示例：

1. 首先，确保你已经安装了 Vue.js 和 Naive-UI：

npm install vue@2.x naive-ui

2. 在你的 Vue.js 项目中，引入 Naive-UI 的样式和组件：

import { createApp } from 'vue';
import naive from 'naive-ui';
import 'naive-ui/lib/index.css';

const app = createApp();
app.use(naive);
app.mount('#app');

3. 在你的组件中使用弹出框组件：

<template>
  <div>
    <n-button @click="showDialog">点击弹出框</n-button>
    <n-dialog v-model:visible="dialogVisible">
      <span>这是一个弹出框</span>
      <template #footer>
        <n-button @click="dialogVisible = false">关闭</n-button>
      </template>
    </n-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
  },
};
</script>

上述示例中，我们使用了 Naive-UI 的 Button 组件来触发弹出框的显示，使用了 Dialog 组件来创建弹出框，通过 v-model:visible 来控制弹出框的显示与隐藏。在弹出框的底部，我们通过 #footer 插槽自定义了一个关闭按钮。

你可以根据自己的需求进一步定制和使用 Naive-UI 弹出框组件。