修改月份控件。

examples/Desktop.vue

@@ -28,4 +28,15 @@ export default {
 </script>
 
 <style>
+h1{
+    font-size: 36px;
+    border-bottom: 1px solid lightgray;
+    padding-bottom: 10px;
+}
+
+h2 {
+    font-size: 26px;
+    border-bottom: 1px solid lightgray;
+    padding-bottom: 10px;
+}
 </style>

examples/modal/src/ModalExample.vue

@@ -1,24 +1,26 @@
 <template>
-  <h1>模态框</h1>
-  <button @click="show">显示</button>
-  <Modal ref="modal" title="hello">
-    <div>hello</div>
-  </Modal>
+  <div>
+    <h1>模态框</h1>
+    <button class="btn btn-default" @click="show">显示</button>
+    <Modal ref="modal" title="hello">
+      <div>hello</div>
+    </Modal>
 
     
-  <h1>模态框-标题+内容+结尾</h1>
-  <button @click="show1">显示</button>
-  <Modal ref="modal1" title="hello" :show-canel-button="false" :show-ok-button="false">
-    <template #header>
-      标题
-    </template>
-    <template #default>
-      内容
-    </template>
-    <template #footer>
-      结尾
-    </template>
-  </Modal>
+    <h1>模态框-标题+内容+结尾</h1>
+    <button class="btn btn-default" @click="show1">显示</button>
+    <Modal ref="modal1" title="hello" :show-canel-button="false" :show-ok-button="false">
+      <template #header>
+        标题
+      </template>
+      <template #default>
+        内容
+      </template>
+      <template #footer>
+        结尾
+      </template>
+    </Modal>
+  </div>
 </template>
 
 <script>

examples/vue-monthly-picker/src/VueMonthlyPickerExample.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="app">
-    <h3>月份选择器</h3>
+  <div>
+    <h1>月份选择器</h1>
     <div class="demo-component">
       <vue-monthly-picker
         v-model="selectedMonth"
@@ -15,6 +15,9 @@
         @selected="handleSelect"
       />
     </div>
+
+    <div>选择的月份: {{ selectedMonth }}</div>
+
     <div>
       <div class="form-group">
         <label>只读</label>
@@ -65,7 +68,7 @@
         </select>
       </div>
       <div class="form-group">
-        <label>Alignment</label>
+        <label>对齐</label>
         <select
           v-model="alignment"
           placeholder="Select an alignment"
@@ -126,7 +129,7 @@ export default {
         },
         {
           id: 2,
-          title: 'Japanese',
+          title: '中文',
           monthLabels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
         },
         {
@@ -172,7 +175,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 #app {
     font-family: "Avenir", Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;

packages/vue-monthly-picker/src/VueMonthlyPicker.vue

@@ -8,11 +8,11 @@
         <div
           class="month-year-display"
           :disabled="disabled"
-          :class="[inputClass, {'placeholder': !value}]"
+          :class="[inputClass, {'placeholder': !modelValue}]"
           @click="openMenu"
         >
           <div class="display-text" :class="'display-text-'+alignment" :style="[{'text-align': alignment}]">{{ displayText }}</div>
-          <span v-if="clearOption && value" class="vmp-input-append" @click.stop.prevent="clearSelect">
+          <span v-if="clearOption && modelValue" class="vmp-input-append" @click.stop.prevent="clearSelect">
             <i class="vmp-clear-icon" />
           </span>
         </div>
@@ -59,7 +59,7 @@ import moment from 'moment';
 export default {
   name: 'VueMonthlyPicker',
   props: {
-    'value': {
+    'modelValue': {
       type: String,
       default: null,
     },
@@ -110,7 +110,7 @@ export default {
       default: true,
     },
   },
-  emits: ['input', 'selected'],
+  emits: ['update:modelValue', 'selected'],
   data () {
     return {
       showMenu: false,
@@ -133,12 +133,12 @@ export default {
       };
     },
     displayText () {
-      if (this.value) {
+      if (this.modelValue) {
         let valueMoment = null;
-        if (typeof this.value === 'string') {
-          valueMoment = moment(this.value);
+        if (typeof this.modelValue === 'string') {
+          valueMoment = moment(this.modelValue);
         } else {
-          valueMoment = this.value;
+          valueMoment = this.modelValue;
         }
         if (valueMoment && valueMoment.isValid()) {
           return valueMoment.format(this.dateFormat);
@@ -164,7 +164,7 @@ export default {
     },
   },
   watch: {
-    value: function (value) {
+    modelValue: function (value) {
       this.setValue(value);
     },
   },
@@ -178,7 +178,7 @@ export default {
           this.closeMenu();
         }
       }, false);
-      this.setValue(this.value);
+      this.setValue(this.modelValue);
     },
     openMenu () {
       if (!this.disabled) {
@@ -204,7 +204,7 @@ export default {
       this.closeMenu();
     },
     selectPicker () {
-      this.$emit('input', this.internalMomentValue.clone());
+      this.$emit('update:modelValue', this.internalMomentValue.clone());
       this.$emit('selected', this.internalMomentValue.clone());
     },
     setValue (value) {
@@ -228,12 +228,12 @@ export default {
       return true;
     },
     isCurrentSelected (year, monthIdx) {
-      if (!this.value) {
+      if (!this.modelValue) {
         return false;
       }
-      let checkValue = this.value;
-      if (typeof this.value === 'string') {
-        checkValue = moment(this.value);
+      let checkValue = this.modelValue;
+      if (typeof this.modelValue === 'string') {
+        checkValue = moment(this.modelValue);
       }
       if (checkValue && checkValue.isValid()) {
         const currentMonth = checkValue.format('MM');
@@ -248,7 +248,7 @@ export default {
       }
     },
     clearSelect () {
-      this.$emit('input', null);
+      this.$emit('update:modelValue', null);
       this.$emit('selected', null);
     },
   },