Мы можем добавить временную шкалу в приложение 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!