ElementPlus Dialog 对话框点击不弹出

最新推荐文章于 2025-06-30 12:52:36 发布

原创最新推荐文章于 2025-06-30 12:52:36 发布 · 4.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何将使用JavaScript编写的Vue2 Dialog组件迁移到Vue3，并确保数据响应式。重点在于理解TS语法和Vue3的ref处理，以解决弹窗不显示的问题。

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

在写项目的途中使用了 Dialog弹窗，去官网查看时发现官网的语言是用的 typescript，而我用的是JavaScript 后边在w3c找到用JavaScript的参考代码

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

<el-dialog
  title="提示"
  v-model="dialogVisible"
  width="30%"
  :before-close="handleClose"
>
  <span>这是一段信息</span>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </template>
</el-dialog>
</template>

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

这用的是vue2 的语法，我用的是vue3 然后我进行了修改，如下

export default {
  setup() {
    let dialogVisible = false
    function handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    }
    return {
      handleClose,
      dialogVisible
    }
  }
}

渲染出来后，怎么点击都没弹窗出现，后仔细查看代码发现没有将dialogVisible边成响应式数据，

后边用ref函数处理数据后就可以正常弹窗

let dialogVisible = ref(false)