代码拉取完成，页面将自动刷新
基于Vue的类github contribution组件
$ npm install vue-contribution -S
在 main.js 文件中引入插件并注册
# main.js
import contribution from 'vue-contribution'
import 'vue-contribution/dist/vue-contribution.css';
Vue.use(contribution)
在项目中使用 vue-contribution
<template>
<contribution
:data="data"
:year="2019"
:rectWidth="12"
:rectHeight="12"
:fontSize="10"
:click="click"
monthText="en"
/>
</template>
<script>
export default {
data () {
return {
data: {
'2019-1-1':6,
'2019-1-2':1,
'2019-1-3':2,
'2019-2-2':23,
'2019-2-3':13,
'2019-2-4':7,
'2019-4-1':6,
'2019-4-2':1,
'2019-5-3':2,
'2019-6-2':23,
'2019-6-3':13,
'2019-6-4':7,
'2019-12-20':3,
'2019-12-21':0,
'2019-12-22':9,
'2019-12-23':5
}
}
},
methods: {
click(date){
console.log(date)
}
}
}
</script>
通过以下属性来个性化你的contribution
| 属性 | 说明 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| year | 指定显示的年份 | Number | 本年 | 否 |
| fontSize | 字体大小，单位为px(无需输入单位) | Number | 10 | 否 |
| spacing | 元素之间的间隔，单位为px(无需输入单位) | Number | 2 | 否 |
| rectWidth | 单个元素的宽度，单位为px(无需输入单位) | Number | 12 | 否 |
| rectHeight | 单个元素的高度，单位为px(无需输入单位) | Number | 12 | 否 |
| fontColor | 字体颜色 | String | #767676 | 否 |
| monthText | 月份文本，可选参数为zh-cn,en，当然还可以自定义一个数组，例:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
|
String, Array | zh-cn | 否 |
| click | 点击监听事件，返回当前点击日期，例:2019-1-16
|
Function | - | 否 |
| conditions | 根据当前条件显示不同颜色 | Array | 参见下面的conditions默认值
|
否 |
| data | 数据对象，格式参见下面的data值
|
Object | 无 | 是 |
每个数组对象分别有三个属性condition,value,color。该数组对象可根据自己情况设置任意数量，无数量限制。
condition 就是条件表达式，支持6种运算符> < == != >= <=
value 是条件值color 为颜色值例：{'condition':'<','value':1,'color':'#ebedf0'} 表示当数据值小于1时元素的颜色为#ebedf0。
[
{'condition':'<','value':1,'color':'#ebedf0'},
{'condition':'<','value':3,'color':'#c6e48b'},
{'condition':'<','value':5,'color':'#7bc96f'},
{'condition':'<','value':7,'color':'#239a3b'},
{'condition':'>=','value':7,'color':'#196127'},
]
通过返回如下格式数据来显示contribution的内容，对应日期=>值 的关系。
{
'2019-1-1':6,
'2019-1-2':1,
'2019-1-3':2,
'2019-2-2':23,
'2019-2-3':13,
'2019-2-4':7,
'2019-4-1':6,
'2019-4-2':1,
'2019-5-3':2,
'2019-6-2':23,
'2019-6-3':13,
'2019-6-4':7,
'2019-12-20':3,
'2019-12-21':0,
'2019-12-22':9,
'2019-12-23':5
}
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型