Merge pull request #258 from YikaJ/master

Select组件/Tag组件

src/components/select/select.vue

@@ -478,9 +478,8 @@
             setQuery (query) {
                 if (!this.filterable) return;
                 this.query = query;
-            }
             },
-        compiled () {
+            modelToQuery() {
                 if (!this.multiple && this.filterable && this.model) {
                     this.findChild((child) => {
                         if (this.model === child.value) {
@@ -494,6 +493,10 @@
                         }
                     });
                 }
+            }
+        },
+        compiled () {
+            this.modelToQuery();
 
             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,22 +1,28 @@
 <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>
-    export default {
+const cityList = [
-        data () {
-            return {
-                cityList: [
     {
         value: 'beijing',
         label: '北京市'
@@ -41,10 +47,24 @@
         value: 'chongqing',
         label: '重庆市'
     }
-                ],
+]
-                model11: '',
+    export default {
+        data () {
+            return {
+                cityList1: cityList,
+                model111: '',
+
+                cityList2: [],
+                model112: 'beijing',
+
                 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');
             }
         }
     }