添加disabled属性

Author: mengxiong10

README.md

@@ -66,6 +66,7 @@ export default {
 | first-day-of-week   | Number        | 7           | set the first day of week (1-7)                   |
 | input-class         | String        | 'mx-input'  | the input class name                              |
 | confirm-text        | String        | 'OK'        | the default text to display on confirm button     |
+| disabled            | Boolean       | false       | Disable the component                             |
 
 #### shortcuts
 * true -      show the default shortcuts

README_CN.md

@@ -65,7 +65,8 @@ export default {
 | minute-step         | Number        | 0           | 分钟的步进，设置time-picker-options，这项无效    
 | first-day-of-week   | Number        | 7           | 设置日历星期几开头(1-7)                         
 | input-class         | String        | 'mx-input'  | 自定义输入框的类名                              
-| confirm-text        | String        | 'OK'        | 确认按钮的名称                                 
+| confirm-text        | String        | 'OK'        | 确认按钮的名称
+| disabled            | Boolean       | false       | 禁用组件                           
 
 #### shortcuts
 * true -      显示默认快捷选择

datepicker/calendar-panel.vue

@@ -432,12 +432,20 @@ export default {
       const now = new Date(this.now)
       now.setFullYear(year)
       this.now = now
+      if (this.value) {
+        this.$emit('input', now)
+        this.$emit('select', true)        
+      }
       this.currentPanel = 'months'
     },
     selectMonth(month) {
       const now = new Date(this.now)
       now.setMonth(month)
       this.now = now
+      if (this.value) {
+        this.$emit('input', now)
+        this.$emit('select', true)       
+      }
       this.currentPanel = 'date'
     },
     selectTime(value, index) {

datepicker/index.vue

@@ -1,12 +1,17 @@
 <template>
   <div class="mx-datepicker"
+       :class="{'disabled': disabled}"
        :style="{'width': width + 'px','min-width':range ? (type === 'datetime' ? '320px' : '210px') : '140px'}"
        v-clickoutside="closePopup">
     <input readonly
+          name="date"
+          :disabled="disabled"
           :class="inputClass"
           :value="text"
           :placeholder="innerPlaceholder"
           ref="input"
+          @mouseenter="hoverIcon"
+          @mouseleave="hoverIcon"
           @click="togglePopup"
           @mousedown="$event.preventDefault()">
     <i class="mx-input-icon" 
@@ -120,6 +125,10 @@ export default {
     confirmText: {
       type: String,
       default: 'OK'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -186,10 +195,10 @@ export default {
       this.closePopup()
       this.$emit('confirm', this.currentValue)
     },
-    selectDate() {
-      if (!this.confirm) {
+    selectDate(show = false) {
+      if (!this.confirm && !this.disabled) {
         this.updateDate()
-        if (this.type === 'date' && !this.range) {
+        if (!show && this.type === 'date' && !this.range) {
           this.closePopup()
         }
       }
@@ -207,6 +216,9 @@ export default {
       }
     },
     hoverIcon(e) {
+      if (this.disabled) {
+        return
+      }
       if (e.type === 'mouseenter' && this.text) {
         this.showCloseIcon = true
       }
@@ -215,6 +227,9 @@ export default {
       }
     },
     clickIcon() {
+      if (this.disabled) {
+        return
+      }
       if (this.showCloseIcon) {
         this.$emit('input', '')
       } else {
@@ -297,6 +312,9 @@ export default {
       }
     },
     displayPopup() {
+      if (this.disabled) {
+        return
+      }
       const dw = document.documentElement.clientWidth
       const dh = document.documentElement.clientHeight
       const InputRect = this.$el.getBoundingClientRect()
@@ -360,6 +378,10 @@ export default {
   * {
     box-sizing: border-box;
   }
+  &.disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
 }
 .mx-datepicker-popup {
   position: absolute;
@@ -387,6 +409,10 @@ export default {
   border: 1px solid #ccc;
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  &:disabled, &.disabled {
+    opacity: 0.7;
+    cursor: not-allowed;    
+  }
 }
 
 .mx-input-icon {

dist/build.js

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
     "demo": "cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack.demo.config.js",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack.build.config.js"
+    "deploy": "cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack.deploy.config.js"
   },
   "repository": {
     "type": "git",