Мы можем добавить временную шкалу в приложение Vue с готовыми компонентами.

В этой статье мы рассмотрим, как добавить временную шкалу с этими компонентами.

Горизонтальная временная шкала Vue

Пакет Vue Horizontal Timeline - это простой в использовании пакет, который позволяет нам добавить схему в наше приложение Vue.

Для его установки запускаем:

npm i vue-horizontal-timeline

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

main.js

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

App.vue

<template>
  <vue-horizontal-timeline :items="items"/>
</template>
 
<script>
export default {
  data() {
    const example1 = {
      title: "Title example 1",
      content: "Lorem ipsum dolor sit amet."
    };
    const example2 = {
      title: "Title example 2",
      content: "Lorem ipsum dolor sit amet."
    };
    const example3 = {
      title: "Title example 3",
      content: "Lorem ipsum dolor sit amet."
    };
    const items = [example1, example2, example3];
    return { items };
  }
};
</script>

Регистрируем VueHorizontalTimeline в main.js.

Затем в App.vue мы добавляем компонент vue-horizontal-timeline, чтобы добавить шкалу времени.

В опоре items есть предметы. Каждая запись имеет свойства title и content для отображения заголовка и содержимого.

items-selected имеет объект, который устанавливается при нажатии.

item-unique-key имеет ключ.

title-attr имеет название свойства заголовка.

title-centered позволяет нам установить, центрировать ли заголовок.

title-substr позволяет нам установить подзаголовок для заголовка.

Мы можем заменить title на content и установить содержимое.

min-width имеет минимальную ширину шкалы времени.

min-height имеет минимальную высоту временной шкалы.

timeline-padding имеет отступы на временной шкале.

timeline-background имеет фон временной шкалы.

line-color имеет цвет шкалы времени.

clickable делает кликабельной карточкой, возвращающей объект.

vue-cute-timeline

Еще одна библиотека для добавления шкалы времени в приложение Vue - это библиотека vue-cute-timeline.

Для его установки запускаем:

yarn add vue-cute-timeline --save

Затем мы можем использовать его, используя компоненты timeline, timeline-title и timeline-item.

Например, мы можем написать:

<template>
  <timeline>
    <timeline-title>title</timeline-title>
    <timeline-item bg-color="#9dd8e0">item1</timeline-item>
    <timeline-item :hollow="true">item2</timeline-item>
  </timeline>
</template>
<script>
import { Timeline, TimelineItem, TimelineTitle } from "vue-cute-timeline";
export default {
  components: {
    Timeline,
    TimelineItem,
    TimelineTitle
  }
};
</script>

Мы устанавливаем bg-color, чтобы установить цвет фона точки.

hollow делает точку полой.

Мы увидим вертикальную шкалу времени.

Слот others в timeline-item можно использовать для замены круга нашим собственным изображением.

Например, мы можем написать:

<template>
  <timeline>
    <timeline-title>title</timeline-title>
    <timeline-item bg-color="#9dd8e0">
      <img
        src="https://i.picsum.photos/id/23/10/10.jpg?hmac=vbsZXumVCKRVT_EpOvXvctEtIRS_NFCzkmygpuP_QDk"
        slot="others"
      >
      item1
    </timeline-item>
    <timeline-item :hollow="true">item2</timeline-item>
  </timeline>
</template>
<script>
import { Timeline, TimelineItem, TimelineTitle } from "vue-cute-timeline";
export default {
  components: {
    Timeline,
    TimelineItem,
    TimelineTitle
  }
};
</script>

Чтобы добавить изображение внутри точки.

Заключение

Мы можем добавить пакет Vue Horizontal Timeline или vue-cute-timeline, чтобы добавить временные шкалы в приложение Vue.

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube!