vue3 如何使用 days timezone 显示当前时区的时间

在Vue3中，你可以利用 moment.js 或者其他的时区处理库，如 luxon，来显示特定时区的时间。这里以 luxon 为例，因为它是 Vue 中常用的日期操作库，并支持时区转换。

首先，你需要安装 luxon 和对应的插件：

npm install luxon @vueuse/core

然后，在你的组件里引入并使用它：

<template>
  <div>
    <h1>当前 {{ timeZone }} 时区时间: {{ formattedTime }}</h1>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { DateTime } from 'luxon';

const timeZone = ref('America/New_York'); // 更改为你需要的时区字符串
let formattedTime = ref('');

function getCurrentTimeZoneTime() {
  const localDateTime = DateTime.local();
  const targetDateTime = localDateTime.setZone(timeZone.value);
  formattedTime.value = targetDateTime.toLocaleString(DateTime.DATETIME_FULL, { timeZone });
}

// 初始化并定期更新时区时间
onMounted(() => {
  getCurrentTimeZoneTime();
  setInterval(() => getCurrentTimeZoneTime(), 60 * 1000); // 每分钟刷新一次
})
</script>

在这个例子中，`timeZone`是一个响应式的变量，你可以通过`v-model`绑定到组件的输入或者用户选择。`getCurrentTimeZoneTime`函数获取本地时间，设置为指定时区，然后格式化为字符串展示。