在vue中使用 dialog 弹窗

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

官网介绍：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专栏总篇博客

希望能够帮助到你

over

在vue中使用 dialog 弹窗

猜你喜欢