Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.

В этой статье мы рассмотрим некоторые компоненты времени Vue, которые сэкономят вам время при их создании с нуля.

vue-timeago

Компонент vue-timeago отлично подходит для отображения промежутка времени от текущего времени и времени, которое нам дано.

Мы можем установить его, запустив:

npm i vue-timeago

Тогда мы можем использовать его следующим образом:

main.js :

import Vue from "vue";
import App from "./App.vue";
import VueTimeago from "vue-timeago";
Vue.config.productionTip = false;
Vue.use(VueTimeago, {
  name: "Timeago",
  locale: "en",
  locales: {
    "zh-CN": require("date-fns/locale/zh_cn"),
    ja: require("date-fns/locale/ja")
  }
});
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue :

<template>
  <div id="#app">
    <timeago :datetime="time"></timeago>
    <br>
    <timeago :datetime="time" :auto-update="60"></timeago>
    <br>
    <timeago :datetime="time" locale="zh-CN"></timeago>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      time: new Date(2019, 11, 31)
    };
  }
};
</script>

В main.js мы зарегистрировали компонент timeago глобально с различными языковыми стандартами и именем компонента.

Затем мы включили его, установив datetime, чтобы получить временной интервал от текущего в локали, установленной как значение параметра locale в main.js. В третьем случае мы устанавливаем locale на zh-CN, что является еще одной локалью, которую мы установили в опции locales в качестве альтернативных локалей.

vue-обратный отсчет

Полезный компонент для отображения времени обратного отсчета с учетом того промежутка времени, который мы прошли.

Мы можем установить его, запустив:

npm install @chenfengyuan/vue-countdown

Тогда мы можем использовать его следующим образом:

main.js :

import Vue from "vue";
import App from "./App.vue";
import VueCountdown from "@chenfengyuan/vue-countdown";
Vue.config.productionTip = false;
Vue.component(VueCountdown.name, VueCountdown);
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue :

<template>
  <div id="#app">
    <countdown :time="2 * 24 * 60 * 60 * 1000">
      <template
        slot-scope="props"
      >Time Remaining：{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
    </countdown>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

В приведенном выше коде мы передали значение свойства time как число. Затем мы можем получить дни, часы, минуты и секунды, вычисленные по обратному отсчету из свойств слота, и отобразить их в нашем App компоненте.

Другие реквизиты в auto-start, которые являются логическими, чтобы указать, хотим ли мы автоматически запускать обратный отсчет при инициализации.

emit-events указывает, хотим ли мы генерировать события. Это логическая опора

interval - это числовое значение, указывающее интервал в миллисекундах хода обратного отсчета. Он должен быть 0 или больше.

now - это функция для генерации текущего времени в миллисекундах в указанном часовом поясе.

tag - это элемент, в котором находится таймер обратного отсчета. Это строка.

transform принимает функцию преобразования выходных свойств перед рендерингом.

vue-момент-lib

Это библиотека Vue, которая предоставляет нам различные фильтры даты и времени для отображения даты и времени по-своему.

Для работы требуется moment.js, поэтому мы устанавливаем его, выполнив:

npm install --save moment vue-moment-lib

Тогда мы можем использовать его следующим образом:

main.js :

import Vue from "vue";
import App from "./App.vue";
import VueMomentLib from "vue-moment-lib";
Vue.config.productionTip = false;
Vue.use(VueMomentLib);
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue :

<template>
  <div id="#app">
    <span>{{ Date.now() | moment().format("YYYY") }}</span>
    <br>
    <span>{{ "11-14-2018" | time("MM-DD-YYYY").format("YYYY") }}</span>
    <br>
    <span>{{ 1318781876 | unix().utc() }}</span>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Приведенный выше код импортирует библиотеку в наше приложение, а затем мы можем использовать moment методы для форматирования даты по своему желанию.

В первом примере дата преобразуется в объект момента, а затем форматируется для отображения только года.

Второй берет строку и затем преобразует ее в год с помощью moment. time - это псевдоним для moment.

В третьем примере используется временная метка UNIX, затем возвращается дата-время в формате UTC и отображается.

Тогда мы должны увидеть:

2020
2018
Sun Oct 16 2011 16:17:56 GMT+0000

отображается на экране.

Как мы видим, для отображения дат так, как мы хотим, потребовалось совсем немного времени. Мы также можем использовать его в коде нашего компонента.

Например, мы можем использовать его следующим образом:

App.vue :

<template>
  <div id="#app">
    {{thisYear}}
    <br>
    {{unixUtc}}
    <br>
    {{utc}}
  </div>
</template>
<script>
export default {
  name: "App",
  computed: {
    thisYear() {
      return this.$time(new Date(2019, 0, 1)).format("YYYY");
    },
    unixUtc() {
      return this.$unix(1318781876).utc();
    },
    utc() {
      return this.$utc(Date.now()).format("LLLL");
    }
  }
};
</script>

Код обращается к vue-moment методам из this, поскольку мы импортировали его в main.js, как мы это делали в предыдущем примере. Затем мы вызываем методы так же, как и с шаблонными фильтрами.

Тогда мы должны увидеть:

2019
Sun Oct 16 2011 16:17:56 GMT+0000
Sunday, February 16, 2020 2:12 AM

отображается на экране.

Заключение

Существует множество библиотек для работы с датой и временем, которые помогают нам отображать время и управлять им так, как мы хотим. Все они очень настраиваемы, поэтому мы можем использовать их для отображения дат и промежутков времени, не вычисляя их самостоятельно.