可以传入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>
最终页面效果为：
