vue3对话框中获取当前时间

在 Vue 3 中，可以使用 `getCurrentInstance` 函数获取当前组件实例，然后在组件实例中使用 `getCurrentTime` 函数来获取当前时间。以下是一个示例代码：

<template>
  <div>
    <button @click="showDialog">显示对话框</button>
    <dialog v-if="isDialogVisible">
      <p>当前时间：{{ currentTime }}</p>
      <button @click="isDialogVisible = false">关闭</button>
    </dialog>
  </div>
</template>

<script>
import { getCurrentInstance } from 'vue';

export default {
  data() {
    return {
      isDialogVisible: false,
    };
  },
  computed: {
    currentTime() {
      const instance = getCurrentInstance();
      const now = new Date();
      return `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
    },
  },
  methods: {
    showDialog() {
      this.isDialogVisible = true;
    },
  },
};
</script>

在上面的代码中，我们首先从 Vue 中导入 `getCurrentInstance` 函数。在组件实例的计算属性 `currentTime` 中，我们通过 `getCurrentInstance` 函数获取当前组件实例，并使用 JavaScript 中的 `Date` 对象来获取当前时间。最终返回当前时间的字符串表示。在模板中，我们使用插值语法来显示当前时间。