vue.js水平时间轴_用Vue.js制作的简单水平时间轴组件

vue.js水平时间轴

Vue水平时间线(Vue Horizontal Timeline)

a simple horizontal timeline component made with Vue.js.

一个由Vue.js制作的简单水平时间轴组件。

如何安装(How to install)

npm(npm)

$ npm install vue-horizontal-timeline --save

纱线(推荐)(yarn (recommended))

$ yarn add vue-horizontal-timeline

快速开始(Quick start)

Vue.js(Vue.js)

You can import in yourmain.js file

您可以导入main.js文件

import Vue from "vue";
import VueHorizontalTimeline from "vue-horizontal-timeline";

Vue.use(VueHorizontalTimeline);

Or locally in any component

或本地任何组件

import { VueHorizontalTimeline } from "vue-horizontal-timeline";

export default {
  components: {
    VueHorizontalTimeline
  }
};

Nuxt.js(Nuxt.js)

You can import as a Nuxt.js plugin

您可以导入为Nuxt.js插件

~/plugins/vue-horizontal-timeline.js

~/plugins/vue-horizontal-timeline.js

import Vue from "vue";
import VueHorizontalTimeline from "vue-horizontal-timeline";

Vue.use(VueHorizontalTimeline);

and then import it in yournuxt.config.js file

然后将其导入到您的nuxt.config.js文件中

plugins: ["~/plugins/vue-horizontal-timeline.js"];

基本用法(Basic usage)

<template>
  <vue-horizontal-timeline :items="items" />
</template>

<script>
  export default {
    data() {
      const example1 = {
        title: "Title example 1",
        content:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio."
      };
      const example2 = {
        title: "Title example 2",
        content:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio."
      };
      const example3 = {
        title: "Title example 3",
        content:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio."
      };
      const items = [example1, example2, example3];

      return { items };
    }
  };
</script>

道具(Props)

发展历程(Development)

Fork the project and enter this commands in your terminal

分叉项目并在终端中输入此命令

git clone https://github.com/YOUR_GITHUB_USERNAME/vue-horizontal-timeline.git
cd vue-horizontal-timeline
yarn

故事书(Storybook)

For visual testing, this project contains storybook which you can run by doing the next command

对于视觉测试，该项目包含故事书，您可以通过执行以下命令来运行它

$ yarn storybook:serve

笑话(Jest)

Before making the PR, if you changed something that needs to be tested, please make the tests inside thetests/unit folder.

在制作PR之前，如果您更改了需要测试的内容，请在tests/unit文件夹中tests/unit 。

To run the tests, you can use the next command

要运行测试，可以使用下一个命令

$ yarn test:unit

承诺(Commitlint)

This project follows thecommitlint guidelines, with minor changes.

该项目遵循commitlint准则，但进行了一些小的更改。

You can commit usingnpm run commit to help you with that.

您可以使用npm run commit来npm run commit帮助。

There's apre-push hook that runs all the unit tests before you can push it.

有一个pre-push钩子可以运行所有单元测试，然后再将其推入。

If an error occurs, you can use thenpm run commit:retry command that runs the previousnpm run commit that you already filled.

如果发生错误，则可以使用npm run commit:retry命令来运行您先前已填写的npm run commit 。

去做(TODO)

• [x] Add 100% test coverage

  [x]增加100％的测试覆盖率

• [x] Add demo website/code pen

  [x]添加演示网站/代码笔

• [x] Publish in npm

  [x]在npm中发布

翻译自:https://vuejsexamples.com/a-simple-horizontal-timeline-component-made-with-vue-js/

vue.js水平时间轴