signcalendar

signCalendar

简单的打卡项目附属组件

A check-in component with a calendar

安装

npm i -S signcalendar

使用

import { Calendar, Player } from 'signcalendar'
Vue.use(Calendar)
Vue.use(Player)

在模板中

<sign-calendar v-on:tap-day="tapday" :qd="qd" :noqd="noqd"></sign-calendar>
<sign-player @load="load" @on-timeupdate="timeupdate" @on-prev="prev" @on-next="next" :url="url">
  <template v-slot:prev>
    <span @click="prev">上一个</span>
  </template>
  <template v-slot:next>
    <span @click="next">下一个</span>
  </template>
</sign-player>

load需绑定一个函式，传回一个值，为是否加载的状态

v-on:tap-day 传入一个函式，当点击日历中某一天的时候，会触发

qd为已经签到的时间戳

noqd是漏签的时间戳

data () {
  return {
      qd: [
        "1558803661"
      ],
      noqd: [
        "1558544461",
        "1558458061",
      ]
    }
},
methods: {
  signIn () {
    this.qd.push(Date.parse(new Date()) / 1000)
    console.log('点击签到', this.qd);
  }
}

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# 打包发布(npmjs)
npm run prod

# 打包并发布
npm run pub

For a detailed explanation on how things work, check out the guide and docs for vue-loader.