在vue中使用 dialog 弹窗

Bertha 。 2022-04-04 10:40 1265阅读 0赞

> 使用弹窗进行交互可以提升用户体验度，使页面也变得简洁

官网介绍：[http://element-cn.eleme.io/\#/zh-CN/component/dialog\#dialog-dui-hua-kuang][http_element-cn.eleme.io_zh-CN_component_dialog_dialog-dui-hua-kuang]

**最简单的组成**

1.  触发的按钮，此弹框一般都是点击按钮触发后弹出来的

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

*  @click：点击触发的事件
 *  dialogVisible = true：dialogVisible 这个局部变量控制着弹窗的显示隐藏（ true 为显示，false 为隐藏）

2.  最基本的弹框模型

<el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose">
      <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>

*  title：弹窗的标题
 *  :visible.sync="dialogVisible"：dialogVisible 这个局部变量控制着弹窗的显示隐藏（ true 为显示，false 为隐藏）
 *  :before-close="handleClose"：关闭前的回调，会暂停 Dialog 的关闭
 *  slot="footer"：弹窗分为两部分（ body 和 footer ），这里为 footer
 *  @click="dialogVisible = false"：确定和取消按钮都将关闭弹窗

3.  data() 中的变量

data() {
          return {
            dialogVisible: false
          };
        }

*  dialogVisible：上文中使用频率最高的变量，用来控制弹框的显示隐藏

4.  methods 方法

handleClose(done){
            this.$confirm('确定关闭吗').then(() => {
              // function(done)，done 用于关闭 Dialog
              done();
    
              console.info("点击右上角 'X' ，取消按钮或遮罩层时触发");
            }).catch(() => {
    
              console.log("点击确定时触发");
            });
        }

*  handleClose：弹窗在关闭前触发的事件（点击右上角的 'X'，取消按钮以及遮罩层部分时） 询问是否确定关闭此弹窗，点击确定则关闭

**整个完整demo**

<template>
      <div class="app-container">
    
    
         <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    
         <el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose">
           <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
          };
        },
        methods: {
          handleClose(done){
            this.$confirm('确定关闭吗').then(() => {
              // function(done)，done 用于关闭 Dialog
              done();
    
              console.info("点击右上角 'X' ，取消按钮或遮罩层时触发");
            }).catch(() => {
    
              console.log("点击确定时触发");
            });
          }
        }
      };
    </script>

> **欢迎来访[我的vue专栏总篇][vue]博客**

希望能够帮助到你

over

[http_element-cn.eleme.io_zh-CN_component_dialog_dialog-dui-hua-kuang]: http://element-cn.eleme.io/#/zh-CN/component/dialog%23dialog-dui-hua-kuang
[vue]: https://blog.csdn.net/qq_41402200/article/details/84390947