在vue中使用 dialog 弹窗

最新推荐文章于 2025-07-02 11:07:00 发布

qq_39355295

最新推荐文章于 2025-07-02 11:07:00 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue Javascript

本文链接：https://blog.csdn.net/qq_39355295/article/details/103482058

vue 同时被 2 个专栏收录

30 篇文章

订阅专栏

Javascript

19 篇文章

订阅专栏

本文介绍了在Vue项目中如何使用Dialog弹窗，包括基本演示、原代码展示以及详细的本地使用步骤，强调了通过控制组件的显示与隐藏来提升用户体验，并提供了实际操作中的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1、基本演示

在这里插入图片描述

2、原代码

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

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :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>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

基本设置可以看官网的说明。

3、本地vue使用：

(1)首先在页面中添加组件：

在页面中一开始是隐藏的。

<el-dialog :show-close="false" :visible.sync="dialogVisible" width="60%">
      <span>您未开通权限</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

(2)然后在每一个页面中添加对应的方法

，用于控制Dialog的显示与隐藏。

<li class="rou" @click="testRoute(item[1].judge)" v-loading="loading3">

说明：testRoute是我定义的方法，还在后面的methods方法中实现。

(3)testRoute方法实现：

这里dialogVisible的就是控制弹出框的显示与隐藏的条件。
在具体的实现中，name是判断时候弹出弹窗的前提判断条件。

 testRoute(name) {
      if (name) {
        console.log("权限内");
      } else {
        this.dialogVisible = true;
      }
    }

至此vue中使用Dialog的功能介绍完毕，全部是本人亲测可以使用的。