other / mew-iview

Commit 8f48491aa6efbea3c4a60794c0260a9782048a2f

Authored by Aresn
Committed by GitHub
2 parents d8de604f 1d8dad93

Merge pull request #258 from YikaJ/master 

Select组件/Tag组件
Showing 4 changed files with 77 additions and 44 deletions   Show diff stats
Inline Side-by-side
src/components/select/select.vue
  Show/Hide comments   View file @8f48491
... ... @@ -478,22 +478,25 @@
478 478 setQuery (query) {
479 479 if (!this.filterable) return;
480 480 this.query = query;
  481 + },
  482 + modelToQuery() {
  483 + if (!this.multiple && this.filterable && this.model) {
  484 + this.findChild((child) => {
  485 + if (this.model === child.value) {
  486 + if (child.label) {
  487 + this.query = child.label;
  488 + } else if (child.searchLabel) {
  489 + this.query = child.searchLabel;
  490 + } else {
  491 + this.query = child.value;
  492 + }
  493 + }
  494 + });
  495 + }
481 496 }
482 497 },
483 498 compiled () {
484   - if (!this.multiple && this.filterable && this.model) {
485   - this.findChild((child) => {
486   - if (this.model === child.value) {
487   - if (child.label) {
488   - this.query = child.label;
489   - } else if (child.searchLabel) {
490   - this.query = child.searchLabel;
491   - } else {
492   - this.query = child.value;
493   - }
494   - }
495   - });
496   - }
  499 + this.modelToQuery();
497 500  
498 501 this.updateOptions(true);
499 502 document.addEventListener('keydown', this.handleKeydown);
... ... @@ -501,6 +504,7 @@
501 504 // watch slot changed
502 505 if (MutationObserver) {
503 506 this.observer = new MutationObserver(() => {
  507 + this.modelToQuery();
504 508 this.slotChange();
505 509 this.updateOptions(true, true);
506 510 });
... ... @@ -521,6 +525,7 @@
521 525 },
522 526 watch: {
523 527 model () {
  528 + this.modelToQuery();
524 529 if (this.multiple) {
525 530 if (this.slotChangeDuration) {
526 531 this.slotChangeDuration = false;
... ...
src/components/tag/tag.vue
  Show/Hide comments   View file @8f48491
1 1 <template>
2 2 <div :class="classes" transition="fade">
3   - <span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span><Icon v-if="closable" type="ios-close-empty" @click="close"></Icon>
  3 + <span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span><Icon v-if="closable" type="ios-close-empty" @click.stop="close"></Icon>
4 4 </div>
5 5 </template>
6 6 <script>
... ...
test/routers/select.vue
  Show/Hide comments   View file @8f48491
1 1 <template>
2 2 <Row>
3 3 <i-col span="12" style="padding-right:10px">
4   - <i-select :model.sync="model11" filterable>
5   - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
  4 + <i-select :model.sync="model111" filterable>
  5 + <i-option v-for="item in cityList1" :value="item.value">{{ item.label }}</i-option>
6 6 </i-select>
7 7 </i-col>
  8 + </Row>
  9 + <Row>
  10 + <i-col span="12" style="padding-right:10px">
  11 + <i-select :model.sync="model112" filterable>
  12 + <i-option v-for="item in cityList2" :value="item.value">{{ item.label }}</i-option>
  13 + </i-select>
  14 + </i-col>
  15 + </Row>
  16 + <Row>
8 17 <i-col span="12">
9 18 <i-select :model.sync="model12" filterable multiple>
10   - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
  19 + <i-option v-for="item in cityList1" :value="item.value">{{ item.label }}</i-option>
11 20 </i-select>
12 21 </i-col>
13 22 </Row>
14 23 </template>
15 24 <script>
  25 +const cityList = [
  26 + {
  27 + value: 'beijing',
  28 + label: '北京市'
  29 + },
  30 + {
  31 + value: 'shanghai',
  32 + label: '上海市'
  33 + },
  34 + {
  35 + value: 'shenzhen',
  36 + label: '深圳市'
  37 + },
  38 + {
  39 + value: 'hangzhou',
  40 + label: '杭州市'
  41 + },
  42 + {
  43 + value: 'nanjing',
  44 + label: '南京市'
  45 + },
  46 + {
  47 + value: 'chongqing',
  48 + label: '重庆市'
  49 + }
  50 +]
16 51 export default {
17 52 data () {
18 53 return {
19   - cityList: [
20   - {
21   - value: 'beijing',
22   - label: '北京市'
23   - },
24   - {
25   - value: 'shanghai',
26   - label: '上海市'
27   - },
28   - {
29   - value: 'shenzhen',
30   - label: '深圳市'
31   - },
32   - {
33   - value: 'hangzhou',
34   - label: '杭州市'
35   - },
36   - {
37   - value: 'nanjing',
38   - label: '南京市'
39   - },
40   - {
41   - value: 'chongqing',
42   - label: '重庆市'
43   - }
44   - ],
45   - model11: '',
  54 + cityList1: cityList,
  55 + model111: '',
  56 +
  57 + cityList2: [],
  58 + model112: 'beijing',
  59 +
46 60 model12: []
47 61 }
  62 + },
  63 + ready() {
  64 + this.model111 = 'hangzhou'
  65 + setTimeout(()=>{
  66 + this.cityList2 = cityList
  67 + }, 500)
48 68 }
49 69 }
50 70 </script>
... ...
test/routers/tag.vue
  Show/Hide comments   View file @8f48491
... ... @@ -40,6 +40,8 @@
40 40 <i-button @click="loading = true">true</i-button>
41 41 <i-button @click="loading = false">false</i-button>
42 42 </Modal>
  43 + <br><br>
  44 + <Tag type="border" color="yellow" closable @click="clickTag" @on-close="clickTagClose">标签一</Tag>
43 45 </template>
44 46 <script>
45 47 import { Tag, Modal, iButton } from 'iview';
... ... @@ -56,6 +58,12 @@
56 58 setTimeout(() => {
57 59 this.modal1 = false;
58 60 }, 2000);
  61 + },
  62 + clickTag() {
  63 + console.log('click tag');
  64 + },
  65 + clickTagClose() {
  66 + console.log('click tag close-icon');
59 67 }
60 68 }
61 69 }
... ...