vue nuxt弹出框

在 Vue 和 Nuxt 中，可以使用第三方库来实现弹出框功能，比如 Element UI 或者 Vuetify。以下是使用 Element UI 实现弹出框的示例代码：

1. 安装 Element UI：

npm i element-ui -S

2. 在 Nuxt 中引入并使用 Element UI：

// 在 nuxt.config.js 中引入 Element UI 样式
css: [
  'element-ui/lib/theme-chalk/index.css'
],

// 在 plugins 目录下创建 element-ui.js
import Vue from 'vue'
import Element from 'element-ui'

Vue.use(Element)

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

<template>
  <div>
    <el-button @click="showDialog">打开弹出框</el-button>
    <el-dialog :visible.sync="dialogVisible">
      <span>这是一个弹出框</span>
    </el-dialog>
  </div>
</template>

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

以上代码中，我们使用了 Element UI 的 el-button 和 el-dialog 组件来实现弹出框的功能。通过在组件中定义一个 dialogVisible 变量来控制弹出框的显示和隐藏。当点击打开弹出框的按钮时，调用 showDialog 方法来设置 dialogVisible 变量为 true，弹出框就会显示出来。