feat: 新增 年月日选择器格式

kouchao · kouchao · commit 4c1a75ec18c2 · 2019-04-28T18:00:29.000+08:00
diff --git a/src/components/date-picker/src/date-picker.vue b/src/components/date-picker/src/date-picker.vue
@@ -21,6 +21,7 @@
 import Toast from './toast';
 import Main from './main';
 import Vue from 'vue';
+import { oneOf } from '@/utils/validatorProps';
 
 export default {
   name: 'LayDatePicker',
@@ -29,6 +30,13 @@ export default {
       type: [String, Number],
       default: ''
     },
+    type: {
+      type: String,
+      default: 'date',
+      validator (value) {
+        return oneOf('type', ['year', 'month', 'date'], value);
+      }
+    },
     placeholder: {
       type: String,
       default: ''
@@ -60,6 +68,7 @@ export default {
       this.picker = Toast();
       this.picker.elem = this.$refs.input;
       this.main = new Vue(Main);
+      this.main.$props.type = this.type;
       this.main.$mount();
       this.main.$on('change', this.emitChange);
       this.main.$on('close', () => {
diff --git a/src/components/date-picker/src/main/index.vue b/src/components/date-picker/src/main/index.vue
@@ -47,7 +47,7 @@
           class="laydate-btns-confirm"
           @click="handelConfirm"
         >
-          确定
+          确定{{ type }} {{ selectedType }}
         </span>
       </div>
     </div>
@@ -60,8 +60,8 @@ import { getDaysInMonth } from '../utils';
 import DateTable from '../content/date-table';
 import MonthTable from '../content/month-table';
 import YearTable from '../content/year-table';
-
 import PickerHeader from '../header';
+import { oneOf } from '@/utils/validatorProps';
 
 export default {
   name: 'Main',
@@ -71,16 +71,30 @@ export default {
     YearTable,
     PickerHeader
   },
+  props: {
+    type: {
+      type: String,
+      default: 'date',
+      validator (value) {
+        return oneOf('type', ['year', 'month', 'date'], value);
+      }
+    }
+  },
   data () {
     return {
       selectedYear: 0,
       selectedMonth: 0,
       selectedDay: 0,
-      // date year month
-      selectedType: 'date'
+      selectedType: this.type
     };
   },
+  watch: {
+    type: function () {
+      this.selectedType = this.type;
+    }
+  },
   created () {
+    this.selectedType = this.type;
     // // 测试当前时间
     const date = new Date();
     this.handerYearTableChange(date.getFullYear());
@@ -94,7 +108,7 @@ export default {
     handerMonthTableChange (month, isHeaderChange) {
       this.selectedMonth = month;
       if (!isHeaderChange) {
-        this.selectedType = 'date';
+        this.selectedType = this.type;
       }
 
       let _day = this.checkDay();
@@ -103,16 +117,27 @@ export default {
     handerYearTableChange (year, isHeaderChange) {
       this.selectedYear = year;
       if (!isHeaderChange) {
-        this.selectedType = 'date';
+        this.selectedType = this.type;
       }
 
       let _day = this.checkDay();
       this.handerDateTableChange(_day);
 
     },
     emitChange (isClear) {
-      const val = isClear ? '' : `${this.selectedYear}/${this.selectedMonth + 1}/${this.selectedDay}`;
-      this.$emit('change', val);
+      let val;
+      switch (this.type) {
+      case 'year':
+        val = `${this.selectedYear}`;
+        break;
+      case 'month':
+        val = `${this.selectedYear}/${this.selectedMonth + 1}`;
+        break;
+      case 'date':
+        val = `${this.selectedYear}/${this.selectedMonth + 1}/${this.selectedDay}`;
+        break;
+      }
+      this.$emit('change', isClear ? '' : val);
       this.$emit('close');
     },
     checkDay (year = this.selectedYear, month = this.selectedMonth, day = this.selectedDay) {
@@ -166,7 +191,7 @@ export default {
       this.emitChange();
     },
     handelConfirm () {
-      this.selectedType = 'date';
+      this.selectedType = this.type;
       this.emitChange();
     }
   }
diff --git a/src/views/DatePicker.md b/src/views/DatePicker.md
@@ -4,12 +4,26 @@
     placeholder="选择日期">
 </lay-date-picker>
 
+<lay-date-picker
+    v-model="value2"
+    type="month"
+    placeholder="选择月份">
+</lay-date-picker>
+
+<lay-date-picker
+    v-model="value3"
+    type="year"
+    placeholder="选择年">
+</lay-date-picker>
+
 <script>
 export default {
   name: "DataPicker",
   data(){
       return {
-         value1: '' 
+         value1: '',
+         value2: '',
+         value3: ''
       }
   }
 };
