other / mew-iview

Commit 3ae11e857694b70a572ca1b601d827924c8910ea

Authored by 梁灏
1 parent 2fcd34da

update Cascader

Showing 2 changed files with 57 additions and 5 deletions   Show diff stats
Inline Side-by-side
src/components/cascader/cascader.vue
  Show/Hide comments   View file @3ae11e8
... ... @@ -3,12 +3,17 @@
3 3 <div :class="[prefixCls + '-rel']" @click="toggleOpen">
4 4 <slot>
5 5 <i-input
  6 + ref="input"
6 7 :readonly="!filterable"
7 8 :disabled="disabled"
8   - :value="displayRender"
  9 + :value="displayInputRender"
9 10 @on-change="handleInput"
10 11 :size="size"
11   - :placeholder="placeholder"></i-input>
  12 + :placeholder="inputPlaceholder"></i-input>
  13 + <div
  14 + :class="[prefixCls + '-label']"
  15 + v-show="filterable && query === ''"
  16 + @click="handleFocus">{{ displayRender }}</div>
12 17 <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect"></Icon>
13 18 <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
14 19 </slot>
... ... @@ -47,13 +52,14 @@
47 52 import clickoutside from '../../directives/clickoutside';
48 53 import { oneOf } from '../../utils/assist';
49 54 import Emitter from '../../mixins/emitter';
  55 + import Locale from '../../mixins/locale';
50 56  
51 57 const prefixCls = 'ivu-cascader';
52 58 const selectPrefixCls = 'ivu-select';
53 59  
54 60 export default {
55 61 name: 'Cascader',
56   - mixins: [ Emitter ],
  62 + mixins: [ Emitter, Locale ],
57 63 components: { iInput, Drop, Icon, Caspanel },
58 64 directives: { clickoutside },
59 65 props: {
... ... @@ -78,8 +84,7 @@
78 84 default: true
79 85 },
80 86 placeholder: {
81   - type: String,
82   - default: '请选择'
  87 + type: String
83 88 },
84 89 size: {
85 90 validator (value) {
... ... @@ -128,6 +133,7 @@
128 133 `${prefixCls}`,
129 134 {
130 135 [`${prefixCls}-show-clear`]: this.showCloseIcon,
  136 + [`${prefixCls}-size-${this.size}`]: !!this.size,
131 137 [`${prefixCls}-visible`]: this.visible,
132 138 [`${prefixCls}-disabled`]: this.disabled
133 139 }
... ... @@ -144,6 +150,19 @@
144 150  
145 151 return this.renderFormat(label, this.selected);
146 152 },
  153 + displayInputRender () {
  154 + return this.filterable ? '' : this.displayRender;
  155 + },
  156 + localePlaceholder () {
  157 + if (this.placeholder === undefined) {
  158 + return this.t('i.select.placeholder');
  159 + } else {
  160 + return this.placeholder;
  161 + }
  162 + },
  163 + inputPlaceholder () {
  164 + return this.filterable && this.currentValue.length ? null : this.localePlaceholder;
  165 + },
147 166 querySelections () {
148 167 let selections = [];
149 168 function getSelections (arr, label, value) {
... ... @@ -226,11 +245,16 @@
226 245 const item = this.querySelections[index];
227 246  
228 247 if (item.item.disabled) return false;
  248 + // todo 还有bug，选完，删除后，失焦，不能回到上次选择的
229 249 this.query = '';
  250 + this.$refs.input.currentValue = '';
230 251 const oldVal = JSON.stringify(this.currentValue);
231 252 this.currentValue = item.value.split(',');
232 253 this.emitValue(this.currentValue, oldVal);
233 254 this.handleClose();
  255 + },
  256 + handleFocus () {
  257 + this.$refs.input.focus();
234 258 }
235 259 },
236 260 created () {
... ... @@ -270,6 +294,11 @@
270 294 if (this.currentValue.length) {
271 295 this.updateSelected();
272 296 }
  297 + } else {
  298 + if (this.filterable) {
  299 + this.query = '';
  300 + this.$refs.input.currentValue = '';
  301 + }
273 302 }
274 303 this.$emit('on-visible-change', val);
275 304 },
... ...
src/styles/components/cascader.less
  Show/Hide comments   View file @3ae11e8
... ... @@ -19,6 +19,29 @@
19 19 cursor: @cursor-disabled;
20 20 }
21 21  
  22 + &-label{
  23 + width: 100%;
  24 + height: 100%;
  25 + line-height: 32px;
  26 + padding: 0 7px;
  27 + box-sizing: border-box;
  28 + white-space: nowrap;
  29 + text-overflow: ellipsis;
  30 + overflow: hidden;
  31 + cursor: pointer;
  32 + font-size: @font-size-small;
  33 + position: absolute;
  34 + left: 0;
  35 + top: 0;
  36 + }
  37 + &-size-large &-label{
  38 + line-height: 36px;
  39 + font-size: @font-size-base;
  40 + }
  41 + &-size-small &-label{
  42 + line-height: 26px;
  43 + }
  44 +
22 45 .@{cascader-prefix-cls}-arrow:nth-of-type(1) {
23 46 display: none;
24 47 cursor: pointer;
... ...