other / mew-iview

Commit e4ebd304380912ae11ada4753c7134e1cd14a8ca

Authored by 梁灏
1 parent e355dd49

update Select component 

update Select component:add filterable
Showing 4 changed files with 63 additions and 12 deletions   Show diff stats
Inline Side-by-side
components/select/option-group.vue
  Show/Hide comments   View file @e4ebd30
... ... @@ -18,7 +18,8 @@
18 18 },
19 19 data () {
20 20 return {
21   - prefixCls: prefixCls
  21 + prefixCls: prefixCls,
  22 + hidden: false // for search
22 23 }
23 24 }
24 25 }
... ...
components/select/option.vue
  Show/Hide comments   View file @e4ebd30
1 1 <template>
2   - <li :class="classes" @click.stop="select" @mouseout.stop="blur"><slot>{{ showLabel }}</slot></li>
  2 + <li :class="classes" @click.stop="select" @mouseout.stop="blur" v-show="!hidden"><slot>{{ showLabel }}</slot></li>
3 3 </template>
4 4 <script>
5 5 const prefixCls = 'ivu-select-item';
... ... @@ -23,7 +23,9 @@
23 23 return {
24 24 selected: false,
25 25 index: 0, // for up and down to focus
26   - isFocus: false
  26 + isFocus: false,
  27 + hidden: false, // for search
  28 + searchLabel: '' // the value is slot,only for search
27 29 }
28 30 },
29 31 computed: {
... ... @@ -51,14 +53,20 @@
51 53 },
52 54 blur () {
53 55 this.isFocus = false;
  56 + },
  57 + queryChange (val) {
  58 + this.hidden = !new RegExp(val, 'i').test(this.searchLabel);
54 59 }
55 60 },
56 61 ready () {
57   -
  62 + this.searchLabel = this.$el.innerHTML;
58 63 },
59 64 events: {
60 65 'on-select-close' () {
61 66 this.isFocus = false;
  67 + },
  68 + 'on-query-change' (val) {
  69 + this.queryChange(val);
62 70 }
63 71 }
64 72 }
... ...
components/select/select.vue
  Show/Hide comments   View file @e4ebd30
... ... @@ -16,7 +16,8 @@
16 16 v-if="filterable"
17 17 v-model="query"
18 18 :placeholder="placeholder"
19   - :style="inputStyle">
  19 + :style="inputStyle"
  20 + @blur="handleBlur">
20 21 <Icon type="ios-close" :class="[`${prefixCls}-arrow`]" v-show="showCloseIcon" @click.stop="clearSingleSelect"></Icon>
21 22 <Icon type="arrow-down-b" :class="[`${prefixCls}-arrow`]"></Icon>
22 23 </div>
... ... @@ -209,6 +210,10 @@
209 210 child.selected = false;
210 211 });
211 212 this.model = '';
  213 +
  214 + if (this.filterable) {
  215 + this.query = '';
  216 + }
212 217 }
213 218 },
214 219 updateMultipleSelected (init = false) {
... ... @@ -342,24 +347,32 @@
342 347 }
343 348  
344 349 let child_status = {
345   - disabled: false
  350 + disabled: false,
  351 + hidden: false
346 352 };
347 353  
  354 + let find_deep = false; // can next find allowed
  355 +
348 356 this.findChild((child) => {
349 357 if (child.index === this.focusIndex) {
350 358 child_status.disabled = child.disabled;
  359 + child_status.hidden = child.hidden;
351 360  
352   - if (!child.disabled) {
  361 + if (!child.disabled && !child.hidden) {
353 362 child.isFocus = true;
354 363 }
355 364 } else {
356 365 child.isFocus = false;
357 366 }
  367 +
  368 + if (!child.hidden && !child.disabled) {
  369 + find_deep = true;
  370 + }
358 371 });
359 372  
360 373 this.resetScrollTop();
361 374  
362   - if (child_status.disabled) {
  375 + if ((child_status.disabled || child_status.hidden) && find_deep) {
363 376 this.navigateOptions(direction);
364 377 }
365 378 },
... ... @@ -374,6 +387,23 @@
374 387 if (topOverflowDistance < 0) {
375 388 this.$refs.dropdown.$el.scrollTop += topOverflowDistance;
376 389 }
  390 + },
  391 + handleBlur () {
  392 + setTimeout(() => {
  393 + const model = this.model;
  394 +
  395 + if (this.multiple) {
  396 +
  397 + } else {
  398 + if (model !== '') {
  399 + this.findChild((child) => {
  400 + if (child.value === model) {
  401 + this.query = child.searchLabel;
  402 + }
  403 + });
  404 + }
  405 + }
  406 + }, 300);
377 407 }
378 408 },
379 409 ready () {
... ... @@ -397,6 +427,9 @@
397 427 } else {
398 428  
399 429 }
  430 + },
  431 + query (val) {
  432 + this.$broadcast('on-query-change', val);
400 433 }
401 434 },
402 435 events: {
... ... @@ -413,6 +446,14 @@
413 446 }
414 447 } else {
415 448 this.model = value;
  449 +
  450 + if (this.filterable) {
  451 + this.findChild((child) => {
  452 + if (child.value === value) {
  453 + this.query = child.searchLabel;
  454 + }
  455 + });
  456 + }
416 457 }
417 458 }
418 459 }
... ...
local/routers/select.vue
  Show/Hide comments   View file @e4ebd30
... ... @@ -4,7 +4,7 @@
4 4 {{ city | json }}<br>
5 5 <Button @click="city = 'hangzhou'">切换城市</Button>
6 6 <br>
7   - <i-select :model.sync="city" style="width:200px" @on-change="change">
  7 + <i-select v-if="true" :model.sync="city" style="width:200px" @on-change="change">
8 8 <i-option-group label="热门城市">
9 9 <i-option value="beijing">北京市</i-option>
10 10 <i-option value="shanghai" disabled label="上海市">上海市2</i-option>
... ... @@ -38,11 +38,12 @@
38 38 </i-select>
39 39  
40 40 <i-select :model.sync="focus" style="width:200px" @on-change="change" clearable filterable label-in-value>
41   - <i-option value="beijing">北京市</i-option>
  41 + <i-option value="beijing">北京</i-option>
42 42 <i-option value="shanghai" label="上海市">上海市</i-option>
43 43 <i-option value="shenzhen" disabled>深圳市</i-option>
44 44 <i-option value="guangzhou" label="广州市">广州市2</i-option>
45 45 <i-option value="shijiazhuang" disabled>石家庄市</i-option>
  46 + <!--<i-option value="shijiazhuang2">石家庄市2</i-option>-->
46 47 <i-option value="a">a市</i-option>
47 48 <i-option value="b">b市</i-option>
48 49 <i-option value="c">c市</i-option>
... ... @@ -50,8 +51,8 @@
50 51 <i-option value="e">e市</i-option>
51 52 </i-select>
52 53  
53   - <i-select :model.sync="focus2" style="width:300px" @on-change="change" clearable multiple>
54   - <i-option value="beijing">北京市</i-option>
  54 + <i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable multiple>
  55 + <i-option value="beijing" label="北京市">北京2</i-option>
55 56 <i-option value="shanghai">上海市</i-option>
56 57 <i-option value="shenzhen" disabled>深圳市</i-option>
57 58 <i-option value="guangzhou">广州市</i-option>
... ...