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

好的，可以按照如下步骤来实现一个简单的亚运会倒计时：

1. 安装 element-ui 和 moment.js

在终端中进入项目目录，输入以下命令安装 element-ui 和 moment.js：

npm install element-ui moment --save

2. 在 main.js 中引入 element-ui

在 main.js 中添加以下代码：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 创建一个 Countdown.vue 组件

在 src/components 目录下创建 Countdown.vue 文件，并添加以下代码：

<template>
  <div class="countdown">
    <el-card>
      <h2>{{ title }}</h2>
      <div class="countdown-timer">
        <div class="countdown-item">
          <div class="countdown-value">{{ days }}</div>
          <div class="countdown-label">天</div>
        </div>
        <div class="countdown-item">
          <div class="countdown-value">{{ hours }}</div>
          <div class="countdown-label">小时</div>
        </div>
        <div class="countdown-item">
          <div class="countdown-value">{{ minutes }}</div>
          <div class="countdown-label">分</div>
        </div>
        <div class="countdown-item">
          <div class="countdown-value">{{ seconds }}</div>
          <div class="countdown-label">秒</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'Countdown',
  props: {
    title: {
      type: String,
      default: '亚运会倒计时'
    },
    endTime: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      intervalId: null,
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0
    }
  },
  mounted() {
    // 获取倒计时时间
    const endTime = moment(this.endTime)
    const now = moment()
    const duration = moment.duration(endTime.diff(now))

    // 初始化倒计时数据
    this.days = Math.floor(duration.asDays())
    this.hours = duration.hours()
    this.minutes = duration.minutes()
    this.seconds = duration.seconds()

    // 启动定时器
    this.intervalId = setInterval(() => {
      this.updateCountdown()
    }, 1000)
  },
  methods: {
    updateCountdown() {
      // 获取倒计时时间
      const endTime = moment(this.endTime)
      const now = moment()
      const duration = moment.duration(endTime.diff(now))

      // 更新倒计时数据
      this.days = Math.floor(duration.asDays())
      this.hours = duration.hours()
      this.minutes = duration.minutes()
      this.seconds = duration.seconds()

      // 倒计时结束时清除定时器
      if (duration <= 0) {
        clearInterval(this.intervalId)
      }
    }
  },
  beforeUnmount() {
    clearInterval(this.intervalId)
  }
}
</script>

<style scoped>
.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.countdown-timer {
  display: flex;
  justify-content: space-between;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-value {
  font-size: 3rem;
  font-weight: bold;
}

.countdown-label {
  font-size: 1.5rem;
  color: #999;
}
</style>

4. 在 App.vue 中使用 Countdown 组件

在 App.vue 中添加以下代码：

<template>
  <div id="app">
    <Countdown endTime="2022-09-10 00:00:00" />
  </div>
</template>

<script>
import Countdown from './components/Countdown.vue'

export default {
  name: 'App',
  components: {
    Countdown
  }
}
</script>

在这里我们将倒计时时间设置为 2022 年 9 月 10 日的零点，你可以根据实际情况进行修改。

5. 运行项目并查看效果

在终端中输入以下命令运行项目：

npm run serve

打开浏览器访问 http://localhost:8080/，即可看到亚运会倒计时。