Vue 时间轴插件 hzqing-vue-timeline 使用教程

最新推荐文章于 2024-09-13 21:50:35 发布

强妲佳Darlene

最新推荐文章于 2024-09-13 21:50:35 发布

阅读量909

点赞数 18

本文链接：https://blog.csdn.net/gitblog_00040/article/details/136757140

版权

Vue 时间轴插件 hzqing-vue-timeline 使用教程

hzqing-vue-timeline vue的时间轴插件项目地址: https://gitcode.com/gh_mirrors/hz/hzqing-vue-timeline

1. 项目介绍

hzqing-vue-timeline 是一个基于 Vue.js 的时间轴插件，旨在帮助开发者快速创建和展示时间轴内容。该插件提供了丰富的配置选项，支持自定义时间轴的样式和内容，适用于个人博客、项目进度展示等多种场景。

2. 项目快速启动

安装

首先，通过 npm 安装 hzqing-vue-timeline：

npm install -S hzqing-vue-timeline

引入和使用

在 Vue 项目的 main.js 中全局引入并注册组件：

// main.js
import Vue from 'vue';
import hzqingVueTimeline from 'hzqing-vue-timeline';

Vue.use(hzqingVueTimeline);

在需要使用时间轴的组件中，直接使用 <hzqing-vue-timeline> 标签，并传入相应的配置：

<template>
  <div>
    <hzqing-vue-timeline
      timelineColor="#5bbcd5"
      timeContentColor="#fff"
      :dataList="dataList"
    ></hzqing-vue-timeline>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          time: 1522372393000,
          img: 'static/touxiang.jpeg',
          title: 'hzqing.com',
          content: '这是衡钊清的个人博客',
        },
        {
          time: '2018-03-30 14:36:35',
          img: 'static/one.jpeg',
          title: '这是一个简单的vue时间轴插件',
          content: '这是一个简单的vue时间轴插件，使用非常的方便',
        },
        {
          time: 1522372393000,
          img: 'static/three.jpg',
          title: '努力奋斗',
          content: '当你发现你的才华撑不起野心时，就请安静下来学习吧~~~',
        },
      ],
    };
  },
};
</script>