526互联

el-dialog在vue3中的应用

发布时间 2023-03-28 14:36:50作者: 盘思动
  • 一般根据文档给到的demo，其中:visible.sync控制显示隐藏，我实测不行的呢?改用v-model=“dialogVisible”来实现
<template>
  <el-dialog title="提示" :visible.sync="dialogVisible">
    <!-- 对话框内容 -->
  </el-dialog>
</template>

<script>
import { ref } from 'vue';
import { ElDialog } from 'element-plus';

export default {
  components: {
    ElDialog,
  },

  setup() {
    const dialogVisible = ref(false);

    // 显示对话框
    const showDialog = () => {
      dialogVisible.value = true;
    };

    // 隐藏对话框
    const hideDialog = () => {
      dialogVisible.value = false;
    };

    return {
      dialogVisible,
      showDialog,
      hideDialog,
    };
  },
};
</script>