添加年份控件。

examples/App.vue

@@ -55,6 +55,9 @@
                     <li>
                         <router-link :to="{ path: '/desktop/vue-monthly-picker-example'}">月份控件</router-link>
                     </li>
+                    <li>
+                        <router-link :to="{ path: '/desktop/year-picker-example'}">年份控件</router-link>
+                    </li>
 
                     <li>
                         <router-link :to="{ path: '/desktop/modal-example'}">模态框</router-link>

examples/route/index.js

@@ -15,6 +15,7 @@ const TreeExample = () => import(/* webpackChunkName: "tree-example" */ '../tree
 const UploadWidgetExample = () => import(/* webpackChunkName: "tree-example" */ '../upload-widget/src/UploadWidgetExample.vue')
 const VueBootstrapPaginationExample = () => import(/* webpackChunkName: "tree-example" */ '../vue-bootstrap-pagination/src/VueBootstrapPaginationExample.vue')
 const VueMonthlyPickerExample = () => import(/* webpackChunkName: "vue-monthly-picker-example" */ '../vue-monthly-picker/src/VueMonthlyPickerExample.vue')
+const YearPickerExample = () => import(/* webpackChunkName: "year-picker-example" */ '../year-picker/src/YearPickerExample.vue')
 
 
 
@@ -84,6 +85,8 @@ export default {
 				/** 月份控件 */
 				{ path: 'vue-monthly-picker-example', component: VueMonthlyPickerExample },
 
+				/** 年份控件 */
+				{ path: 'year-picker-example', component: YearPickerExample },
 
 				
 				

examples/year-picker/src/YearPickerExample.vue

@@ -0,0 +1,35 @@
+<template>
+    <h1>年份选择器</h1>
+
+    <YearPicker v-model="year"></YearPicker>
+
+    <div>{{ year }}</div>
+</template>
+
+<script>
+import YearPicker from "@/year-picker/index.js";
+
+export default {
+    data: function(){
+        return {
+            year: '2022'
+        }
+    },
+
+    components: {
+        "YearPicker": YearPicker,
+    },
+
+    methods: {
+      
+    },
+
+    mounted: function(){
+        
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

packages/year-picker/src/YearPicker.vue

@@ -18,10 +18,10 @@ module.exports = {
             start: 1990,
             end: 2050,
             years: [],
-            year: this.dateValue,
+            year: '',
         }
     },
-    props: ["dateValue", "readonly"],
+    props: ["modelValue", "readonly"],
     methods: {
         /**
          * 初始化时间年份列表
@@ -37,19 +37,30 @@ module.exports = {
             _self.years.sort(function (a, b) {
                 return b - a;
             });
+        },
+        
+        /**
+         * 判断年份是否存在，如果年不存在就添加
+         */
+        checkYear: function(value){
+            if(value != null && value.length == 4 && this.years.indexOf(value) < 0){
+                this.years.push(value);
+            }
         }
-
     },
     mounted: function () {
         this.initYear();
     },
     watch: {
         "year": function () {
-            this.$emit('selected', this.year);
+            this.$emit('update:modelValue', this.year);
         },
 
-        "dateValue": function () {
-            this.year = this.dateValue;
+        "modelValue": {
+            handler: function(newValue, oldValue){
+                this.year = newValue;
+            },
+            immediate: true
         }
     }
 }