Преглед на файлове

DatePicker: fix disabled in range mode

Leopoldthecoder преди 7 години
родител
ревизия
bd0114454e
променени са 2 файла, в които са добавени 28 реда и са изтрити 1 реда
  1. 4 1
      packages/date-picker/src/picker.vue
  2. 24 0
      packages/theme-chalk/src/date-picker/picker.scss

+ 4 - 1
packages/date-picker/src/picker.vue

@@ -31,7 +31,8 @@
     class="el-date-editor el-range-editor el-input__inner"
     :class="[
       'el-date-editor--' + type,
-      'el-range-editor--' + pickerSize,
+      pickerSize ? `el-range-editor--${ pickerSize }` : '',
+      disabled ? 'is-disabled' : '',
       pickerVisible ? 'is-active' : ''
     ]"
     @click="handleRangeClick"
@@ -45,6 +46,7 @@
     <input
       :placeholder="startPlaceholder"
       :value="displayValue && displayValue[0]"
+      :disabled="disabled"
       @input="handleStartInput"
       @change="handleStartChange"
       @focus="handleFocus"
@@ -53,6 +55,7 @@
     <input
       :placeholder="endPlaceholder"
       :value="displayValue && displayValue[1]"
+      :disabled="disabled"
       @input="handleEndInput"
       @change="handleEndChange"
       @focus="handleFocus"

+ 24 - 0
packages/theme-chalk/src/date-picker/picker.scss

@@ -146,4 +146,28 @@
       line-height: 20px;
     }
   }
+
+  @include when(disabled) {
+    background-color: $--input-disabled-fill;
+    border-color: $--input-disabled-border;
+    color: $--input-disabled-color;
+    cursor: not-allowed;
+
+    &:hover, &:focus {
+      border-color: $--input-disabled-border;
+    }
+
+    input {
+      background-color: $--input-disabled-fill;
+      color: $--input-disabled-color;
+      cursor: not-allowed;
+      &::placeholder {
+        color: $--input-disabled-placeholder-color;
+      }
+    }
+
+    .el-range-separator {
+      color: $--input-disabled-color;
+    }
+  }
 }