update Cascader

梁灏
1 parent 2fcd34da
Showing 2 changed files with 57 additions and 5 deletions Show diff stats
src/components/cascader/cascader.vue
src/styles/components/cascader.less
@@ -3,12 +3,17 @@
         <div :class="[prefixCls + '-rel']" @click="toggleOpen">
             <slot>
                 <i-input
+                    ref="input"
                     :readonly="!filterable"
                     :disabled="disabled"
-                    :value="displayRender"
+                    :value="displayInputRender"
                     @on-change="handleInput"
                     :size="size"
-                    :placeholder="placeholder"></i-input>
+                    :placeholder="inputPlaceholder"></i-input>
+                <div
+                    :class="[prefixCls + '-label']"
+                    v-show="filterable && query === ''"
+                    @click="handleFocus">{{ displayRender }}</div>
                 <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect"></Icon>
                 <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
             </slot>
@@ -47,13 +52,14 @@
     import clickoutside from '../../directives/clickoutside';
     import { oneOf } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
+    import Locale from '../../mixins/locale';
     const prefixCls = 'ivu-cascader';
     const selectPrefixCls = 'ivu-select';
     export default {
         name: 'Cascader',
-        mixins: [ Emitter ],
+        mixins: [ Emitter, Locale ],
         components: { iInput, Drop, Icon, Caspanel },
         directives: { clickoutside },
         props: {
@@ -78,8 +84,7 @@
                 default: true
             },
             placeholder: {
-                type: String,
-                default: '请选择'
+                type: String
             },
             size: {
                 validator (value) {
@@ -128,6 +133,7 @@
                     `${prefixCls}`,
                     {
                         [`${prefixCls}-show-clear`]: this.showCloseIcon,
+                        [`${prefixCls}-size-${this.size}`]: !!this.size,
                         [`${prefixCls}-visible`]: this.visible,
                         [`${prefixCls}-disabled`]: this.disabled
                     }
@@ -144,6 +150,19 @@
                 return this.renderFormat(label, this.selected);
             },
+            displayInputRender () {
+                return this.filterable ? '' : this.displayRender;
+            },
+            localePlaceholder () {
+                if (this.placeholder === undefined) {
+                    return this.t('i.select.placeholder');
+                } else {
+                    return this.placeholder;
+                }
+            },
+            inputPlaceholder () {
+                return this.filterable && this.currentValue.length ? null : this.localePlaceholder;
+            },
             querySelections () {
                 let selections = [];
                 function getSelections (arr, label, value) {
@@ -226,11 +245,16 @@
                 const item = this.querySelections[index];
                 if (item.item.disabled) return false;
+                // todo 还有bug，选完，删除后，失焦，不能回到上次选择的
                 this.query = '';
+                this.$refs.input.currentValue = '';
                 const oldVal = JSON.stringify(this.currentValue);
                 this.currentValue = item.value.split(',');
                 this.emitValue(this.currentValue, oldVal);
                 this.handleClose();
+            },
+            handleFocus () {
+                this.$refs.input.focus();
             }
         },
         created () {
@@ -270,6 +294,11 @@
                     if (this.currentValue.length) {
                         this.updateSelected();
                     }
+                } else {
+                    if (this.filterable) {
+                        this.query = '';
+                        this.$refs.input.currentValue = '';
+                    }
                 }
                 this.$emit('on-visible-change', val);
             },
@@ -19,6 +19,29 @@
         cursor: @cursor-disabled;
     }
+    &-label{
+        width: 100%;
+        height: 100%;
+        line-height: 32px;
+        padding: 0 7px;
+        box-sizing: border-box;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        cursor: pointer;
+        font-size: @font-size-small;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+    &-size-large &-label{
+        line-height: 36px;
+        font-size: @font-size-base;
+    }
+    &-size-small &-label{
+        line-height: 26px;
+    }
+
     .@{cascader-prefix-cls}-arrow:nth-of-type(1) {
         display: none;
         cursor: pointer;