elementUI实现弹窗

ElementUI是一套基于Vue.js的组件库，其中包含了弹窗组件。以下是实现弹窗的步骤：

1. 安装ElementUI

使用npm或yarn安装ElementUI：

npm install element-ui

或者

yarn add element-ui

2. 引入ElementUI

在Vue项目的main.js文件中，引入ElementUI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 使用ElDialog组件

在需要弹窗的组件中，使用ElDialog组件：

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

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

在上面的代码中，ElDialog组件的visible属性控制弹窗的显示与隐藏，使用.sync修饰符可以实现双向绑定。方法openDialog()用来打开弹窗，即将dialogVisible属性设为true。

4. 设置弹窗属性

ElDialog组件还有许多属性可以设置，例如弹窗的标题、大小、是否可以拖拽等。以下是一些常用的属性：

<el-dialog
  title="弹窗标题"
  :visible.sync="dialogVisible"
  width="50%"
  :before-close="handleClose"
  :close-on-click-modal="false"
>
  <span>这是一个弹窗</span>
</el-dialog>

其中，title属性设置弹窗的标题，width属性设置弹窗的宽度，before-close属性设置弹窗关闭前的回调函数，close-on-click-modal属性设置是否点击遮罩层关闭弹窗。

5. 自定义弹窗内容

ElDialog组件还可以自定义弹窗的内容，例如使用插槽来替换默认的底部按钮：

<el-dialog
  title="弹窗标题"
  :visible.sync="dialogVisible"
>
  <span>这是一个弹窗</span>
  <template #footer>
    <el-button @click="dialogVisible = false">关闭</el-button>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </template>
</el-dialog>

在上面的代码中，使用了插槽#footer来替换默认的底部按钮。其中，@click事件绑定了关闭弹窗和提交表单的方法。

至此，就完成了使用ElementUI实现弹窗的过程。