添加月份选择器。

examples/App.vue

@@ -52,7 +52,9 @@
                     <li>
                         <router-link :to="{ path: '/desktop/pagination-example'}">分页控件</router-link>
                     </li>
-
+                    <li>
+                        <router-link :to="{ path: '/desktop/vue-monthly-picker-example'}">月份控件</router-link>
+                    </li>
 
                     <li>
                         <router-link :to="{ path: '/desktop/modal-example'}">模态框</router-link>

examples/route/index.js

@@ -14,6 +14,7 @@ const TimeExample = () => import(/* webpackChunkName: "time-example" */ '../time
 const TreeExample = () => import(/* webpackChunkName: "tree-example" */ '../tree/src/TreeExample.vue')
 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')
 
 
 
@@ -80,9 +81,11 @@ export default {
 				/** 分页控件 */
 				{ path: 'pagination-example', component: VueBootstrapPaginationExample },
 
+				/** 月份控件 */
+				{ path: 'vue-monthly-picker-example', component: VueMonthlyPickerExample },
 
 
-
+				
 				
 
 

examples/vue-monthly-picker/app.vue

@@ -1,186 +0,0 @@
-<template>
-  <div id="app">
-    <img src="./assets/logo.png">
-    <h3>Vue Monthly Picker</h3>
-    <div class="demo-component">
-      <vue-monthly-picker
-       :inputClass="{'input': isDisplayInput}"
-       :disabled="isDisable"
-       :monthLabels="locale"
-       :clearOption="clearOption"
-       :min="min"
-       :max="max"
-       @selected="handleSelect"
-       v-model="selectedMonth"
-       :alignment="alignment"
-       :selectedBackgroundColor="selectedBackgroundColor">
-      </vue-monthly-picker>
-    </div>
-    <div class="columns option-list">
-      <div class="column is-3">
-        <b-field label="Disabled" expanded>
-            <b-checkbox v-model="isDisable">
-                {{ isDisable ? 'Disabled': 'Enable'}}
-            </b-checkbox>
-        </b-field>
-      </div>
-      <div class="column is-3">
-        <b-field label="Range" expanded>
-            <b-checkbox v-model="isLimitRange">
-                {{ rangeDisplay }}
-            </b-checkbox>
-        </b-field>
-      </div>
-      <div class="column is-3">
-        <b-field label="Display" expanded position="is-centered">
-            <b-switch v-model="isDisplayInput"
-                true-value="Input"
-                false-value="Label">
-                {{ isDisplayInput? 'Input': 'Label' }}
-            </b-switch>
-        </b-field>
-      </div>
-      <div class="column is-3">
-        <b-field label="Clear icon" expanded>
-            <b-checkbox v-model="clearOption">
-                {{ clearOption ? 'Enable': 'Disabled'}}
-            </b-checkbox>
-        </b-field>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-4">
-        <b-field label="Localization" expanded>
-            <b-select placeholder="Select a language" v-model="locale">
-              <option
-                  v-for="option in options"
-                  :value="option.monthLabels"
-                  :key="option.id">
-                  {{ option.title }}
-              </option>
-            </b-select>
-        </b-field>
-      </div>
-      <div class="column is-4">
-        <b-field label="Alignment" expanded>
-           <b-select placeholder="Select an alignment" v-model="alignment">
-             <option
-                 v-for="alignment in alignments"
-                 :value="alignment"
-                 :key="alignment">
-                 {{ alignment }}
-             </option>
-           </b-select>
-       </b-field>
-      </div>
-      <div class="column is-4">
-        <b-field label="Selected background color" expanded>
-            <b-select placeholder="Select an color" v-model="selectedBackgroundColor">
-              <option
-                  v-for="color in colorExamples"
-                  :value="color"
-                  :key="color">
-                  {{ color }}
-              </option>
-            </b-select>
-        </b-field>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import moment from 'moment'
-import VueMonthlyPicker from './lib'
-
-export default {
-  name: 'app',
-  data () {
-    return {
-      selectedMonth: moment(),
-      isDisable: false,
-      isDisplayInput: true,
-      locale: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-      alignment: 'left',
-      selectedBackgroundColor: 'blue',
-      options: [
-        {
-          id: 1,
-          title: 'English',
-          monthLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-        },
-        {
-          id: 2,
-          title: 'Japanese',
-          monthLabels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
-        },
-        {
-          id: 3,
-          title: 'Korean',
-          monthLabels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
-        }
-      ],
-      alignments: ['left', 'center', 'right'],
-      colorExamples: ['blue', 'red', 'black'],
-      min: null,
-      max: null,
-      isLimitRange: false,
-      clearOption: true
-    }
-  },
-  computed: {
-    rangeDisplay () {
-      if (!this.min || !this.max) {
-        return 'Disabled'
-      }
-      return this.min.format('YYYY/MM') + '-' + this.max.format('YYYY/MM')
-    }
-  },
-  watch: {
-    isLimitRange (newValue) {
-      if (newValue) {
-        this.setSelectRange(moment().subtract(6, 'months'), moment().add(6, 'months'))
-      } else {
-        this.setSelectRange(null, null)
-      }
-    }
-  },
-  methods: {
-    handleSelect (value) {
-      console.log('Select', value)
-    },
-    setSelectRange (min, max) {
-      this.min = min
-      this.max = max
-    }
-  },
-  components: {
-    VueMonthlyPicker
-  }
-}
-</script>
-
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-
-.demo-component {
-  width: 250px;
-  margin: auto;
-}
-.control-group {
-  margin-top: 100px;
-}
-.control {
-  text-align: center;
-}
-.option-list {
-  margin-top: 20px;
-}
-</style>

examples/vue-monthly-picker/docs.js

@@ -1,16 +0,0 @@
-import Vue from 'vue'
-import Buefy from 'buefy'
-Vue.use(Buefy)
-import App from './app'
-import router from './router'
-
-import './styles/app.scss'
-
-Vue.config.productionTip = false
-
-/* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  router,
-  render: h => h(App)
-})

examples/vue-monthly-picker/lib.js

@@ -1,4 +0,0 @@
-import VueMonthlyPicker from './components/VueMonthlyPicker'
-import './styles/lib.scss'
-
-export default VueMonthlyPicker

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

@@ -0,0 +1,184 @@
+<template>
+    <div id="app">
+        <h3>月份选择器</h3>
+        <div class="demo-component">
+            <vue-monthly-picker :inputClass="{'input': isDisplayInput}"
+                                :disabled="isDisable"
+                                :monthLabels="locale"
+                                :clearOption="clearOption"
+                                :min="min"
+                                :max="max"
+                                @selected="handleSelect"
+                                v-model="selectedMonth"
+                                :alignment="alignment"
+                                :selectedBackgroundColor="selectedBackgroundColor">
+            </vue-monthly-picker>
+        </div>
+        <div>
+            <div class="form-group">
+                <label>只读</label>
+                <div class="input-group">
+                    <Switches v-model="isDisable"></Switches>
+                    {{ isDisable ? 'Disabled': 'Enable'}}
+                </div>
+            </div>
+            <div class="form-group">
+                <label>限制范围</label>
+                <div class="input-group">
+                    <Switches v-model="isLimitRange"></Switches>
+                    {{ rangeDisplay }}
+                </div>
+            </div>
+            <div class="form-group">
+                <label>显示</label>
+                <div class="input-group">
+                    <Switches v-model="isDisplayInput"
+                              true-value="Input"
+                              false-value="Label"></Switches>
+                    {{ isDisplayInput? 'Input': 'Label' }}
+                </div>
+            </div>
+            <div class="form-group">
+                <label>清空</label>
+                <div class="input-group">
+                    <Switches v-model="clearOption">
+                    </Switches>
+                    {{ clearOption ? 'Enable': 'Disabled'}}
+                </div>
+            </div>
+            <div class="form-group">
+                <label>国际化</label>
+                <select placeholder="Select a language"
+                        v-model="locale"
+                        class="form-control">
+                    <option v-for="option in options"
+                            :value="option.monthLabels"
+                            :key="option.id">
+                        {{ option.title }}
+                    </option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>Alignment</label>
+                <select placeholder="Select an alignment"
+                        v-model="alignment"
+                        class="form-control">
+                    <option v-for="alignment in alignments"
+                            :value="alignment"
+                            :key="alignment">
+                        {{ alignment }}
+                    </option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>背景色</label>
+                <select placeholder="Select an color"
+                        v-model="selectedBackgroundColor"
+                        class="form-control">
+                    <option v-for="color in colorExamples"
+                            :value="color"
+                            :key="color">
+                        {{ color }}
+                    </option>
+                </select>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import moment from 'moment'
+import VueMonthlyPicker from '@/vue-monthly-picker/index.js'
+import Switches from "@/switches/index.js";
+
+export default {
+    name: 'app',
+    data() {
+        return {
+            selectedMonth: moment(),
+            isDisable: false,
+            isDisplayInput: true,
+            locale: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+            alignment: 'left',
+            selectedBackgroundColor: 'blue',
+            options: [
+                {
+                    id: 1,
+                    title: 'English',
+                    monthLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+                },
+                {
+                    id: 2,
+                    title: 'Japanese',
+                    monthLabels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+                },
+                {
+                    id: 3,
+                    title: 'Korean',
+                    monthLabels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
+                }
+            ],
+            alignments: ['left', 'center', 'right'],
+            colorExamples: ['blue', 'red', 'black'],
+            min: null,
+            max: null,
+            isLimitRange: false,
+            clearOption: true
+        }
+    },
+    computed: {
+        rangeDisplay() {
+            if (!this.min || !this.max) {
+                return 'Disabled'
+            }
+            return this.min.format('YYYY/MM') + '-' + this.max.format('YYYY/MM')
+        }
+    },
+    watch: {
+        isLimitRange(newValue) {
+            if (newValue) {
+                this.setSelectRange(moment().subtract(6, 'months'), moment().add(6, 'months'))
+            } else {
+                this.setSelectRange(null, null)
+            }
+        }
+    },
+    methods: {
+        handleSelect(value) {
+            console.log('Select', value)
+        },
+        setSelectRange(min, max) {
+            this.min = min
+            this.max = max
+        }
+    },
+    components: {
+        VueMonthlyPicker, Switches
+    }
+}
+</script>
+
+<style>
+#app {
+    font-family: "Avenir", Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    margin-top: 60px;
+}
+
+.demo-component {
+    width: 250px;
+    margin: auto;
+}
+.control-group {
+    margin-top: 100px;
+}
+.control {
+    text-align: center;
+}
+.option-list {
+    margin-top: 20px;
+}
+</style>