vue-contribution

基于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>

特点

1. 使用简单，只需简单配置或者只传递一个数据就能立即看到效果
2. 可定制化程度高

props属性

通过以下属性来个性化你的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 | 无 | 是 |

conditions默认值

每个数组对象分别有三个属性condition,value,color。该数组对象可根据自己情况设置任意数量，无数量限制。

1. condition 就是条件表达式，支持6种运算符> < == != >= <=
2. value 是条件值
3. 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'},
]

data值

通过返回如下格式数据来显示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
}