vue 日历插件

本人是一个刚刚入职小码农，用于记录自己学习的过程，写的不好请见谅。

为什么要改写日历插件？

写多了vue项目看到原生的js、jq插件就一阵头疼

大多数网上的js日历插件都长这样

test1

这样

test2

还有这样

test3

网上没有合适的插件就只好自己造

参考了githup的相关代码之后梳理了一下需要做的几个步骤

1. 初始化日历默认值，在原来的代码中加入需要的方法

  //初始化年月日插件默认值
            function dateCtrlInit() {
                var date = new Date();
                var dateArr = {
                    yy: date.getYear(),
                    mm: date.getMonth(),
                    dd: date.getDate() - 1,
                    hh: 0,
                };
                var date_hh = _self.gearDate.querySelector(".date_hh");
                if (date_hh && date_hh.getAttribute("val")) {
                    //得到日期的值
                    var hhVal = parseInt(date_hh.getAttribute("val"));
                    var hhHtml = [
                        // 时辰value
                        {subName:'时辰未知',value:0},
                        {subName:'23:00-00:59(子)',value:0},
                        {subName:'01:00-02:59(丑)',value:1},
                        {subName:'03:00-04:59(寅)',value:2},
                        {subName:'05:00-06:59(卯)',value:3},
                        {subName:'07:00-08:59(辰)',value:4},
                        {subName:'09:00-10:59(巳)',value:5},
                        {subName:'11:00-12:59(午)',value:6},
                        {subName:'13:00-14:59(未)',value:7},
                        {subName:'15:00-16:59(申)',value:8},
                        {subName:'17:00-18:59(酉)',value:9},
                        {subName:'19:00-20:59(戌)',value:10},
                        {subName:'21:00-22:59(亥)',value:11},
                    ]
                    itemStr = "";
                    for(var p = 0,len = hhHtml.length; p < len; p++){
                        itemStr += "<div class='tooth_hh' data-value="+hhHtml[p].value+">" + hhHtml[p].subName + "</div>";
                    }

                    date_hh.innerHTML = itemStr;
                     // 中文转换,type:rm闰月，mm月份，dd日期，num值
                function getChinese(type,num){
                var rmArr=['闰正月','闰二月','闰三月','闰四月','闰五月','闰六月','闰七月','闰八月','闰九月','闰十月','闰冬月','闰腊月'];
                var mmArr=['正月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
                var ddArr=['初一','初二','初三','初四','初五','初六','初七','初八','初九','初十','十一','十二','十三','十四','十五','十六','十七','十八','十九','二十','廿一','廿二','廿三','廿四','廿五','廿六','廿七','廿八','廿九','三十','三十一'];

                if(type=='rm') return rmArr[num-1]
                if(type=='mm') return mmArr[num-1];
                if(type=='dd') return ddArr[num-1];
            }

中间省略了很多代码 都是网上搬运没什么借鉴意义最后记得 export default lCalendar 将这个模块暴露可以让外部引用，第一编写时就应为忘记暴露而出错

2. 在vue项目中入口js引入jq

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    Vue.config.productionTip = false
    import $ from 'jquery'
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

在webpack.base.conf.js里加入

    var webpack = require("webpack")

在module.exports的最后加入

  // 增加一个plugins
  plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
 ],

3. 在vue项目中初始化插件

   html代码

  <div class="calendar">
    <div class="hello">{{msg}}</div>
      <section class="section-datetime">
          <div id="datetime" data-id="birthday">选择日期</div>
          <input type="hidden" id="birthday" name="birthday"  value="" ref="birthday" >
      </section>
    <button @click="test">测试</button>
  </div>

import lCalendar from '../libs/js/lCalendar.js'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to js-lunar-calendar'
    }
  },
  //页面挂载时初始化日期插件
  mounted(){
    var calendar1 = new lCalendar().init('#datetime');
    new lCalendar().init('#dete');
  },

看一下效果··

移动端浏览

js-lunar-calendar2.png

pc端浏览

js-lunar-calendar1.png

结语

第一次发文也不知道写什么好，附上项目地址如果碰巧对大家能够有帮助那真的是太好啦，希望大家多给我一些鼓励。

js农历插件demo