你的位置:首页 > 软件开发 > Java > vue2.0项目 calendar.js(日历组件封装)

vue2.0项目 calendar.js(日历组件封装)

发布时间:2017-03-26 00:00:26
最近一直闲来无事,便寻思着做一下自己的个人项目,也想说能使用现在比较流行的一些mvvm框架来做,于是就选用了这样的一个技术栈vue2.0+vue-router+vuex+webpack来做,做得也是多页面应用,使用vue-router,也是想说把多个功能模块化,单个模块spa,实 ...

最近一直闲来无事,便寻思着做一下自己的个人项目,也想说能使用现在比较流行的一些mvvm框架来做,于是就选用了这样的一个技术栈vue2.0+vue-router+vuex+webpack来做,做得也是多页面应用,使用vue-router,也是想说把多个功能模块化,单个模块spa,实现更高的效果。当然现在还在做的过程中,如果感兴趣可以过来star一下,哈哈,https://github.com/xiaobinwu/Wuji,git clone下来看看。

今天要说的是在做这个项目的过程中,自己想加一个日历功能,但是找遍很多插件,没有多少是合我心意,于是就想说自己写一个,但是想象太美好,技术能力不够,写不出,此处省略一万字。最后找到百度日历还挺符合我要的日历功能,但是我想更加自定化更好一下,于是就拿这个来做了一下修改。结果长这样:

vue2.0项目  calendar.js(日历组件封装)

将其最后的日历组件赋值给一个全局变量,用模块模式暴露一下方法,可以对日历进行配置:

  <div id="cal">    <div id="top">      <div class="select">        <select id="year-select"></select>&nbsp;年        <select id="month-select"></select>&nbsp;月      </div>      <div class="step">        <span id="prev"><</span>        <span id="next">></span>                      </div>    </div>    <ul id="wk">      <li>一</li>      <li>二</li>      <li>三</li>      <li>四</li>      <li>五</li>      <li><b>六</b></li>      <li><b>日</b></li>    </ul>    <div id="cm"></div>    <div id="bm">      <div class="heavenly-branch">        <span id="heavenly"></span>年 &nbsp;        [<span id="branch"></span>]      </div>      <a href="javascript:;;" id="now-date">回到今天</a>    </div>  </div>

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com

原标题:vue2.0项目 calendar.js(日历组件封装)

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。