Tag: vue预览模式: 普通 | 列表

用moment.js构造带操作区的VUE个性化日历

作者:admin  日期:2021-12-01

 

这次项目需要用到这样一个稍有点特别的日历，每一天有一个“操作区”（根据数据有不同的操作），因为这个形态有点特殊，所以无法直接使用vant的日历 组件。之前这个日历列表是由后端同事提供的。后来我自己对moment.js 的操作比较熟练了，自己构造了一个，主要代码如下。

Javascript代码
  1. initCale(){  
  2.     const NOW = moment('2021-05-16')  
  3.     let _first = _.cloneDeep(NOW).startOf('month')  //月头  
  4.     let _last = _.cloneDeep(NOW).endOf('month')     //月尾  
  5.   
  6.     // 计算本月数据  
  7.     let days = NOW.daysInMonth()    //本月天数  
  8.     let list = []   //最终日期列表，存入这个数组  
  9.     for (let ii = 0; ii < days; ii++) {  
  10.         let dd = _.cloneDeep(_first).add(ii, 'days')    //从月头开始往后推算整月  
  11.         list.push(  
  12.             {  
  13.                 date:dd.format('YYYY-MM-DD'),  
  14.                 sd:dd.format('DD'),  
  15.                 day:dd.day(),       //星期几  
  16.                 used:true,  
  17.                 today:dd.format('YYYY-MM-DD')==NOW.format('YYYY-MM-DD') //今天  
  18.             }  
  19.         )  
  20.     }  
  21.   
  22.     // 补月头（上个月剩下的几天）  
  23.     let lenHead = _first.day()-1    //本月第一天是星期几？从而推算月头天数  
  24.     for (let ii = 1; ii <= lenHead; ii++) {  
  25.         let dddd = _.cloneDeep(_first).add(-ii, 'days')  
  26.         list.unshift(  
  27.             {  
  28.                 date:dddd.format('YYYY-MM-DD'),  
  29.                 sd:dddd.format('DD'),  
  30.                 day:dddd.day(),  
  31.                 used:false  
  32.             }  
  33.         )  
  34.     }  
  35.       
  36.     // 补月尾  
  37.     let lenTail = 7 - _last.day()   //月尾天数  
  38.     for (let ii = 1; ii <= lenTail; ii++) {  
  39.         let dddd = _.cloneDeep(_last).add(ii, 'days')  
  40.         list.push(  
  41.             {  
  42.                 date:dddd.format('YYYY-MM-DD'),  
  43.                 sd:dddd.format('DD'),  
  44.                 day:dddd.day(),  
  45.                 used:false  
  46.             }  
  47.         )  
  48.     }  
  49.     this.caleList = list  //caleList是VUE中用于渲染出日历的变量  
  50. },  
  51. 主要HTML:  
  52.   
  53. <ul class="caleList">  
  54.     <li class="top">一</li>  
  55.     <li class="top">二</li>  
  56.     <li class="top">三</li>  
  57.     <li class="top">四</li>  
  58.     <li class="top">五</li>  
  59.     <li class="top">六</li>  
  60.     <li class="top">日</li>  
  61.     <li v-for="item in caleList" :key="item.date"  
  62.         :class="[{'used':item.used},{'today':item.today}]"  
  63.     >  
  64.         <div class="date">{{item.sd}}</div>  
  65.         <div class="opt" v-if="item.used">操作</div>  
  66.     </li>  
  67. </ul>  
  68. 主要CSS（LESS):  
  69.   
  70. .caleList{  
  71.     display: flex; flex-wrap: wrap;  
  72.     li{  
  73.         flex:1 0 100%/7;  
  74.         border: 1px #fff solid;  
  75.           
  76.           
  77.         background-color: #aaa;  
  78.         color: #777;  
  79.           
  80.         &.top{  
  81.             background-color: #fff; color: #900;  
  82.             border: none;  
  83.             height: 40px; display: flex; align-items: center; justify-content: center;  
  84.         }  
  85.         &.used{  
  86.             background-color: #eee;  
  87.             color: #333;  
  88.         }  
  89.         &.today{  
  90.             background-color: rgb(163, 10, 31); color: #fff;  
  91.         }  
  92.         .date{  
  93.             font-size: 24px;  
  94.             display: flex; align-items: center; justify-content: center;height: 35px;  
  95.         }  
  96.         .opt{  
  97.             font-size: 12px;  
  98.             padding: 0px 15px 10px; text-align: center;  
  99.             color: rgb(112, 11, 11);  
  100.             line-height: 120%;  
  101.         }  
  102.     }  
  103. }  

因为逻辑比较简单，此处并没有抽象成组件，有需要再说。

特别感谢知友的这篇文章：

 

Sail：moment的高频用法总结

Tags: vue 个性化日历

分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2698

疑问已解决：vue.js在采用ajax方式读入数据后，无法激活slide插件的滑动行为已经解决

作者:admin  日期:2016-01-22

在vue.js的git上面提交的issue:

 
我在mui+vue.js构建一个slide-pic组件，图片数据用ajax方式获取，vm数据能获取到，dom也发生了相应的改变。但数据读入后，无法激活slide组件的滑动行为。
 
以下是我做的一些探索:
直接使用vue初始化数据（非ajax）可以激活滑动行为。
使用jquery的append方式，把数据结合到dom后，也可以激活。
我将mui的slide-pic组件换成另一个滑动图插件TouchSlide1.1后，同样的现象，用vm方式无法激活。
 
请问这是什么原因？到底是vue还是mui/TouchSlide 插件机制的问题。
 
XML/HTML代码
  1. 以下是无法激活滑动的主要代码：  
  2.   
  3. <div id="slider" class="mui-slider" >  
  4.      <div class="mui-slider-group">  
  5.        <div class="mui-slider-item" v-for="el in list"><img :src="el.picUrl"> </div>  
  6.      </div>  
  7. </div>  
  8.   
  9. <script>  
  10. var vm = new Vue({  
  11.   el: '#slider',  
  12.   data: {list: [] }  
  13. });  
  14.   
  15.   
  16. // 读取图片slide  
  17. mui.ajax({ url: "shopData/slidePic.json", dataType: "json",  
  18.      success: function(data){  
  19.           vm.list = data.list;  
  20.           mui("#slider").slider({  
  21.                interval: 3000  
  22.           });  
  23.      }  
  24. });  
  25. </script>  
  26. ----------------------------------------------  
  27. 以下是可以成功激活的代码：  
  28.   
  29. mui.ajax({ url: "shopData/slidePic.json", dataType: "json",  
  30.      success: function(data){  
  31.           for (var i = 0; i < data.list.length; i++) {  
  32.                $(".mui-slider-group").append(  
  33.                     '<div class="mui-slider-item" ><img src="'+ data.list[i].picUrl + '"> </div>'  
  34.                );  
  35.           }  
  36.   
  37.           mui("#slider").slider({  
  38.                interval: 3000  
  39.           });  
  40.      }  
  41.   
  42. });  
  43.  
此问题由VUE及MUI的技术版主解答了，较常见，用nextTick就解决了。
 
代码如下：
XML/HTML代码
  1. vm_slide.$nextTick(function () {  
  2.  // DOM 现在更新了  
  3.  mui("#slider").slider({  
  4.  interval: 3000  
  5.  });  
  6. })  
 

 

Tags: mui vue slider ajax

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 29722