Merge pull request #258 from YikaJ/master

Select组件/Tag组件

src/components/select/select.vue

@@ -478,22 +478,25 @@
             setQuery (query) {
                 if (!this.filterable) return;
                 this.query = query;
+            },
+            modelToQuery() {
+                if (!this.multiple && this.filterable && this.model) {
+                    this.findChild((child) => {
+                        if (this.model === child.value) {
+                            if (child.label) {
+                                this.query = child.label;
+                            } else if (child.searchLabel) {
+                                this.query = child.searchLabel;
+                            } else {
+                                this.query = child.value;
+                            }
+                        }
+                    });
+                }
             }
         },
         compiled () {
-            if (!this.multiple && this.filterable && this.model) {
+            this.modelToQuery();
-                this.findChild((child) => {
-                    if (this.model === child.value) {
-                        if (child.label) {
-                            this.query = child.label;
-                        } else if (child.searchLabel) {
-                            this.query = child.searchLabel;
-                        } else {
-                            this.query = child.value;
-                        }
-                    }
-                });
-            }
 
             this.updateOptions(true);
             document.addEventListener('keydown', this.handleKeydown);
@@ -501,6 +504,7 @@
             // watch slot changed
             if (MutationObserver) {
                 this.observer = new MutationObserver(() => {
+                    this.modelToQuery();
                     this.slotChange();
                     this.updateOptions(true, true);
                 });
@@ -521,6 +525,7 @@
         },
         watch: {
             model () {
+                this.modelToQuery();
                 if (this.multiple) {
                     if (this.slotChangeDuration) {
                         this.slotChangeDuration = false;

src/components/tag/tag.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="classes" transition="fade">
-        <span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span><Icon v-if="closable" type="ios-close-empty" @click="close"></Icon>
+        <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>
     </div>
 </template>
 <script>

test/routers/select.vue

@@ -1,50 +1,70 @@
 <template>
     <Row>
         <i-col span="12" style="padding-right:10px">
-            <i-select :model.sync="model11" filterable>
+            <i-select :model.sync="model111" filterable>
-                <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
+                <i-option v-for="item in cityList1" :value="item.value">{{ item.label }}</i-option>
             </i-select>
         </i-col>
+    </Row>
+    <Row>
+        <i-col span="12" style="padding-right:10px">
+            <i-select :model.sync="model112" filterable>
+                <i-option v-for="item in cityList2" :value="item.value">{{ item.label }}</i-option>
+            </i-select>
+        </i-col>
+    </Row>
+    <Row>
         <i-col span="12">
             <i-select :model.sync="model12" filterable multiple>
-                <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
+                <i-option v-for="item in cityList1" :value="item.value">{{ item.label }}</i-option>
             </i-select>
         </i-col>
     </Row>
 </template>
 <script>
+const cityList = [
+    {
+        value: 'beijing',
+        label: '北京市'
+    },
+    {
+        value: 'shanghai',
+        label: '上海市'
+    },
+    {
+        value: 'shenzhen',
+        label: '深圳市'
+    },
+    {
+        value: 'hangzhou',
+        label: '杭州市'
+    },
+    {
+        value: 'nanjing',
+        label: '南京市'
+    },
+    {
+        value: 'chongqing',
+        label: '重庆市'
+    }
+]
     export default {
         data () {
             return {
-                cityList: [
+                cityList1: cityList,
-                    {
+                model111: '',
-                        value: 'beijing',
+
-                        label: '北京市'
+                cityList2: [],
-                    },
+                model112: 'beijing',
-                    {
+
-                        value: 'shanghai',
-                        label: '上海市'
-                    },
-                    {
-                        value: 'shenzhen',
-                        label: '深圳市'
-                    },
-                    {
-                        value: 'hangzhou',
-                        label: '杭州市'
-                    },
-                    {
-                        value: 'nanjing',
-                        label: '南京市'
-                    },
-                    {
-                        value: 'chongqing',
-                        label: '重庆市'
-                    }
-                ],
-                model11: '',
                 model12: []
             }
+        },
+        ready() {
+          this.model111 = 'hangzhou'
+          setTimeout(()=>{
+            this.cityList2 = cityList
+          }, 500)
         }
     }
 </script>

test/routers/tag.vue

@@ -40,6 +40,8 @@
         <i-button @click="loading = true">true</i-button>
         <i-button @click="loading = false">false</i-button>
     </Modal>
+    <br><br>
+    <Tag type="border" color="yellow" closable @click="clickTag" @on-close="clickTagClose">标签一</Tag>
 </template>
 <script>
     import { Tag, Modal, iButton } from 'iview';
@@ -56,6 +58,12 @@
                 setTimeout(() => {
                     this.modal1 = false;
                 }, 2000);
+            },
+            clickTag() {
+                console.log('click tag');
+            },
+            clickTagClose() {
+                console.log('click tag close-icon');
             }
         }
     }