Vue组件--时间下拉框（年和月分开）

可以传入nowdata（当前显示的时间），mindata（最早时间），maxdata（最晚时间），如果不传，默认显示 ‘请选择’ ，最早时间为1970年01月，最晚为2099年12月。

其中传入的格式必须为字符串形式的年+月，当月份小于10时，需要前面添加0，如‘201701’。

当月份选择框改变时会传给父组件一个 timechange事件，参数为年+月，如‘201711’。

使用方法：

<spread-yearmonth :nowdata="nowdata" :mindata="mindata" :maxdata="maxdata" @timechange="changeTime"></spread-yearmonth>

组件具体代码：

  1 /**
  2  * Created by Administrator on 2017/11/21.
  3  */
  4 var temp =
  5     "<div>" +
  6         "<select v-model='yearContent.year' @change='yearChange'>" +
  7             "<option value=''>请选择</option>" +
  8             "<option v-for='n in yearContent.yearData' :value='n'>{{n}}</option>" +
  9         "</select>" +
 10         "<span>年</span>" +
 11         "<select v-model='monthContent.month' @change='monthChange'>" +
 12             "<option value=''>请选择</option>" +
 13             "<option v-for='m in monthContent.monthData' :value='m'>{{m}}</option>" +
 14         "</select>" +
 15         "<span>月</span>" +
 16     "</div>";
 17 Vue.component('spread-yearmonth',{
 18     props: ['nowdata','mindata','maxdata'],
 19     template: temp,
 20     data: function () {
 21         return {
 22             yearContent: {
 23                 year: '',
 24                 yearData: [],
 25                 min_year: '',
 26                 max_year: ''
 27             },
 28             monthContent: {
 29                 month: '',
 30                 monthData: [],
 31                 min_month: '',
 32                 max_month: ''
 33             },
 34             static: {
 35                 isFirst: true
 36             }
 37         }
 38     },
 39     created: function () {
 40         var vm = this;
 41 
 42         vm.yearContent.min_year = !!vm.mindata ? vm.sliceData(vm.mindata).year : 1970 ;
 43         vm.monthContent.min_month = !!vm.mindata ? vm.sliceData(vm.mindata).month : 1 ;
 44 
 45         vm.yearContent.max_year = !!vm.maxdata ? vm.sliceData(vm.maxdata).year : 2099 ;
 46         vm.monthContent.max_month = !!vm.maxdata ? vm.sliceData(vm.maxdata).month : 12 ;
 47 
 48         vm.yearContent.year = !!vm.nowdata ? vm.sliceData(vm.nowdata).year : '' ;
 49         vm.monthContent.month = !!vm.nowdata ? vm.sliceData(vm.nowdata).month : '' ;
 50 
 51 
 52         if (vm.yearContent.min_year > vm.yearContent.max_year || (vm.yearContent.min_year == vm.yearContent.max_year && vm.monthContent.min_month > vm.monthContent.max_month)){
 53             alert('最早时间不得晚于最晚时间');
 54             return;
 55         }
 56 
 57         if (!!vm.nowdata && Number(vm.nowdata) < Number(vm.yearContent.min_year+''+vm.monthContent.min_month) || Number(vm.nowdata) > Number(vm.yearContent.max_year+''+vm.monthContent.max_month)){
 58             alert('当前时间不在可显示时间的区间内');
 59             vm.yearContent.year = '';
 60             vm.monthContent.month = '';
 61             return;
 62         }
 63 
 64         for (var i = 0 ; i <= vm.yearContent.max_year - vm.yearContent.min_year ; i++){
 65             vm.yearContent.yearData.push(Number(vm.yearContent.min_year) + i);
 66         }
 67 
 68         if (vm.monthContent.month){
 69             vm.yearChange();
 70         }
 71 
 72 
 73 
 74     },
 75     methods: {
 76         sliceData: function (data) {
 77             if (data && data.length == 6){
 78                 var year = data.slice(0,4);
 79                 var month = data.slice(4);
 80                 return {year: year, month: month};
 81             }
 82         },
 83         yearChange: function () {
 84             var vm = this;
 85 
 86             vm.monthContent.monthData = [];
 87 
 88             if (!vm.static.isFirst){
 89                 vm.monthContent.month = '';
 90             }
 91             vm.static.isFirst = false;
 92 
 93             var min = vm.yearContent.year == vm.yearContent.min_year ? vm.monthContent.min_month : 1;
 94             var max = vm.yearContent.year == vm.yearContent.max_year ? vm.monthContent.max_month : 12;
 95             for (var i = 0 ; i <= max - min ; i++){
 96                 vm.monthContent.monthData.push(Number(min) + i < 10 ? '0' + (Number(min) + i) : Number(min) + i);
 97             }
 98 
 99         },
100         monthChange: function () {
101             var vm = this;
102             vm.$emit('timechange',vm.yearContent.year + '' + vm.monthContent.month);
103         }
104     }
105 });

使用的页面代码为：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <spread-yearmonth :nowdata="nowdata" :mindata="mindata" :maxdata="maxdata" @timechange="changeTime"></spread-yearmonth>
10     </div>
11 </body>
12 </html>
13 <script src="js/vue.js"></script>
14 <script src="js/yearMonth.js"></script>
15 <script>
16     new Vue({
17         el: "#app",
18         data: {
19             nowdata: '',
20             mindata: '',
21             maxdata: ''
22         },
23         created: function () {
24             var vm = this;
25             var d = new Date(),
26                 y = d.getFullYear(),
27                 m = d.getMonth() + 1;
28             vm.nowdata = y + '' + m;
29         },
30         methods: {
31             changeTime: function (time) {
32                 console.log(time);
33             }
34         }
35     })
36 </script>

最终页面效果为：