vue element-ui countdown写一个亚运会倒计时

好的，以下是一个使用 Vue 和 Element-UI 实现的亚运会倒计时：

1. 首先，需要安装 Vue 和 Element-UI：

npm install vue
npm install element-ui

2. 在 Vue 组件中引入 Element-UI 的倒计时组件和样式：

<template>
  <div class="countdown">
    <el-countdown :time="countdown" :auto-start="false" @finish="handleFinish">
      <span slot="days">{{ days }} 天</span>
      <span slot="hours">{{ hours }} 时</span>
      <span slot="minutes">{{ minutes }} 分</span>
      <span slot="seconds">{{ seconds }} 秒</span>
    </el-countdown>
  </div>
</template>

<script>
import { ElCountdown } from 'element-ui'

export default {
  components: { ElCountdown },
  data() {
    return {
      countdown: 0
    }
  },
  computed: {
    days() {
      return Math.floor(this.countdown / (24 * 60 * 60 * 1000))
    },
    hours() {
      return Math.floor((this.countdown % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000))
    },
    minutes() {
      return Math.floor((this.countdown % (60 * 60 * 1000)) / (60 * 1000))
    },
    seconds() {
      return Math.floor((this.countdown % (60 * 1000)) / 1000)
    }
  },
  methods: {
    startCountdown() {
      const endDate = new Date('2022-09-10T00:00:00.000Z')
      const now = new Date()
      this.countdown = endDate - now
    },
    handleFinish() {
      console.log('倒计时结束')
    }
  },
  mounted() {
    this.startCountdown()
  }
}
</script>

<style>
.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 24px;
}
</style>

3. 在组件中定义一个倒计时的结束时间（即亚运会的开幕时间），并使用计算属性将倒计时的毫秒数转换为天、小时、分钟和秒。

4. 在组件的 mounted 钩子函数中调用 startCountdown 方法，该方法会计算倒计时的毫秒数并将其赋值给 countdown 变量。

5. 最后，将倒计时组件添加到模板中，并设置好样式即可。