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,22 +478,25 @@
478 setQuery (query) { 478 setQuery (query) {
479 if (!this.filterable) return; 479 if (!this.filterable) return;
480 this.query = query; 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 compiled () { 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 this.updateOptions(true); 501 this.updateOptions(true);
499 document.addEventListener('keydown', this.handleKeydown); 502 document.addEventListener('keydown', this.handleKeydown);
@@ -501,6 +504,7 @@ @@ -501,6 +504,7 @@
501 // watch slot changed 504 // watch slot changed
502 if (MutationObserver) { 505 if (MutationObserver) {
503 this.observer = new MutationObserver(() => { 506 this.observer = new MutationObserver(() => {
  507 + this.modelToQuery();
504 this.slotChange(); 508 this.slotChange();
505 this.updateOptions(true, true); 509 this.updateOptions(true, true);
506 }); 510 });
@@ -521,6 +525,7 @@ @@ -521,6 +525,7 @@
521 }, 525 },
522 watch: { 526 watch: {
523 model () { 527 model () {
  528 + this.modelToQuery();
524 if (this.multiple) { 529 if (this.multiple) {
525 if (this.slotChangeDuration) { 530 if (this.slotChangeDuration) {
526 this.slotChangeDuration = false; 531 this.slotChangeDuration = false;
src/components/tag/tag.vue
  Show/Hide comments   View file @8f48491
1 <template> 1 <template>
2 <div :class="classes" transition="fade"> 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 </div> 4 </div>
5 </template> 5 </template>
6 <script> 6 <script>
test/routers/select.vue
  Show/Hide comments   View file @8f48491
1 <template> 1 <template>
2 <Row> 2 <Row>
3 <i-col span="12" style="padding-right:10px"> 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 </i-select> 6 </i-select>
7 </i-col> 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 <i-col span="12"> 17 <i-col span="12">
9 <i-select :model.sync="model12" filterable multiple> 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 </i-select> 20 </i-select>
12 </i-col> 21 </i-col>
13 </Row> 22 </Row>
14 </template> 23 </template>
15 <script> 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 export default { 51 export default {
17 data () { 52 data () {
18 return { 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 model12: [] 60 model12: []
47 } 61 }
  62 + },
  63 + ready() {
  64 + this.model111 = 'hangzhou'
  65 + setTimeout(()=>{
  66 + this.cityList2 = cityList
  67 + }, 500)
48 } 68 }
49 } 69 }
50 </script> 70 </script>
test/routers/tag.vue
  Show/Hide comments   View file @8f48491
@@ -40,6 +40,8 @@ @@ -40,6 +40,8 @@
40 <i-button @click="loading = true">true</i-button> 40 <i-button @click="loading = true">true</i-button>
41 <i-button @click="loading = false">false</i-button> 41 <i-button @click="loading = false">false</i-button>
42 </Modal> 42 </Modal>
  43 + <br><br>
  44 + <Tag type="border" color="yellow" closable @click="clickTag" @on-close="clickTagClose">标签一</Tag>
43 </template> 45 </template>
44 <script> 46 <script>
45 import { Tag, Modal, iButton } from 'iview'; 47 import { Tag, Modal, iButton } from 'iview';
@@ -56,6 +58,12 @@ @@ -56,6 +58,12 @@
56 setTimeout(() => { 58 setTimeout(() => {
57 this.modal1 = false; 59 this.modal1 = false;
58 }, 2000); 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 }