hzqing-vue-timeline 项目教程

最新推荐文章于 2024-09-13 08:07:51 发布

羿妍玫Ivan

最新推荐文章于 2024-09-13 08:07:51 发布

阅读量646

点赞数 22

本文链接：https://blog.csdn.net/gitblog_00255/article/details/142191303

版权

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

引入和使用

在 main.js 中全局注册组件：

import Vue from 'vue';
import hzqingVueTimeline from 'hzqing-vue-timeline';

Vue.use(hzqingVueTimeline);

在 Vue 组件中使用：

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

<script>
export default {
  data() {
    return {
      data: [
        {
          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>