当前位置：首页 > VUE

vue element实现弹出窗口

2026-02-21 05:29:54VUE

使用 Vue 和 Element UI 实现弹出窗口

Element UI 提供了 el-dialog 组件用于实现弹出窗口功能。以下是一个完整的实现步骤：

基本弹窗实现

在 Vue 组件中引入并注册 Element UI 后：

<template>
  <div>
    <el-button @click="dialogVisible = true">打开弹窗</el-button>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>这是一段内容</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>

自定义弹窗内容

可以在 el-dialog 标签内添加任意 HTML 内容：

<el-dialog
  title="用户信息"
  :visible.sync="dialogVisible"
  width="50%">
  <el-form :model="form">
    <el-form-item label="姓名">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model="form.age"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </span>
</el-dialog>

弹窗属性配置

el-dialog 支持多种配置属性：

<el-dialog
  title="自定义弹窗"
  :visible.sync="dialogVisible"
  width="60%"
  :close-on-click-modal="false"
  :show-close="false"
  :before-close="handleClose">
  内容区域
</el-dialog>

全屏弹窗

通过设置 fullscreen 属性实现全屏弹窗：

<el-dialog
  title="全屏弹窗"
  :visible.sync="dialogVisible"
  fullscreen>
  全屏内容
</el-dialog>

嵌套弹窗

Element UI 支持弹窗内再打开弹窗：

<el-dialog
  title="父弹窗"
  :visible.sync="parentVisible"
  width="50%">
  <el-button @click="childVisible = true">打开子弹窗</el-button>

  <el-dialog
    title="子弹窗"
    :visible.sync="childVisible"
    width="30%"
    append-to-body>
    子弹窗内容
  </el-dialog>
</el-dialog>

异步关闭弹窗

在关闭前执行异步操作：

methods: {
  handleClose(done) {
    this.$confirm('确认关闭？')
      .then(_ => {
        done()
      })
      .catch(_ => {})
  }
}

弹窗动画

通过 custom-class 添加自定义动画：

vue element实现弹出窗口

<el-dialog
  :visible.sync="dialogVisible"
  custom-class="fade-dialog">
  动画弹窗内容
</el-dialog>

<style>
.fade-dialog {
  animation: fadeIn 0.3s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>

这些方法涵盖了 Vue 和 Element UI 实现弹出窗口的主要场景，可以根据实际需求选择合适的实现方式。