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 your main.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 fig.js file
然后将其导⼊到您的fig.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 bib      };
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 bib      };
const example3 = {
title: "Title example 3",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque a
c, auctor vitae risus. Vivamus risus dolor, faucibus a bib      };
const items = [example1, example2, example3];
return { items };
}
};
</script>
道具 (Props)
Property name Type Default Description
items Array null Array of objects to be displayed. Must have at least a content property
item-selected Object{}Object that is set when it is clicked. Note that clickable prop must be set to true
item-unique-key String''Key to set a blue border to the card when it is clicked (clickable prop must be set to true)
title-attr String'title'Name of the property inside the objects, that are in the items array, to set the cards title
title-centered Boolean false Centralizes the cards title
title-class String''If you want to set a custom class to the cards title, set it here
title-substr String18Number of characters to display inside the cards title. Above this, will set a '...' mask
Name of the property inside the objects, that are in the items array, to set the cards
content-attr String'content'
content
Property name Type Default Description
content-centered Boolean false Centralizes all the cards content text
content-class String''If you want to set a custom class to the cards content, set it here
content-substr String250Number of characters to display inside the cards content. Above this, will set a '...' mask min-width String'200px'Min-width of the timeline
min-height String''Min-height of the timeline
timeline-padding String''Padding of the timeline
timeline-
String'#E9E9E9'Background color of the whole timeline
background
line-color String'#03A9F4'Color of the line inside the timeline
clickable Boolean true Makes the card clickable that returns the object
物业名称类型默认描述
项⽬数组空值要显⽰的对象数组。 必须⾄少具有⼀个内容属性
项⽬选择⽬的{}单击时设置的对象。 请注意, clickable道具必须设置为true
项唯⼀键串''单击时在卡⽚上设置蓝⾊边框的键(必须将clickable道具设置为true)
标题属性串'标题'位于项⽬数组中的对象内部的属性的名称,⽤于设置卡⽚标题
以标题为中⼼布尔型假集中卡⽚标题
头等舱串''如果要为卡⽚标题设置⾃定义类别,请在此处进⾏设置
标题替换串18卡⽚标题中显⽰的字符数。 在此之上,将设置⼀个“ ...”遮罩
内容征询串'内容'位于项⽬数组中的对象内部的属性名称,⽤于设置卡⽚内容
以内容为中⼼布尔型假集中所有卡⽚内容⽂本
内容类别串''如果要为卡⽚内容设置⾃定义类别,请在此处进⾏设置
内容替代串250卡内容中要显⽰的字符数。 在此之上,将设置⼀个“ ...”遮罩
最⼩宽度串'200px'时间线的最⼩宽度
最⼩⾼度串''时间轴的最⼩⾼度
时间线填充串''时间轴的填充
时间轴背景串'#E9E9E9'整个时间轴的背景⾊
线⾊串'#03A9F4'时间轴内线的颜⾊
可点击的布尔型真正使卡⽚可点击以返回对象
发展历程 (Development)
Fork the project and enter this commands in your terminal
分叉项⽬并在终端中输⼊此命令
git clone github/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 the tests/unit folder.
在制作PR之前,如果您更改了需要测试的内容,请在tests/unit⽂件夹中tests/unit 。
To run the tests, you can use the next command
要运⾏测试,可以使⽤下⼀个命令js制作简单的焦点图效果
$ yarn test:unit
承诺 (Commitlint)
This project follows the guidelines, with minor changes.
该项⽬遵循准则,但进⾏了⼀些⼩的更改。
You can commit using npm run commit to help you with that.
您可以使⽤npm run commit来npm run commit帮助。
There's a pre-push hook that runs all the unit tests before you can push it.
有⼀个pre-push钩⼦可以运⾏所有单元测试,然后再将其推⼊。
If an error occurs, you can use the npm run commit:retry command that runs the previous npm 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中发布
翻译⾃:
vue.js⽔平时间轴

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。