在vue中使用 dialog 弹窗

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

官网介绍：http://element-cn.eleme.io/#/zh-CN/component/dialog#dialog-dui-hua-kuang 

最简单的组成

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

点击打开 Dialog

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

2.  最基本的弹框模型

  这是一段信息
  
    取 消
    确 定
  

• 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

 

欢迎来访我的vue专栏总篇博客 

 

希望能够帮助到你

over