fixed #46

fixed #46

fixed #46
梁灏
1 parent f94309af
Showing 5 changed files with 135 additions and 100 deletions Show diff stats
src/components/select/select.vue
src/styles/themes/default/custom.less
src/utils/assist.js
test/routers/select.vue
test/routers/tag.vue
@@ -26,7 +26,7 @@
         </div>
         <Dropdown v-show="visible" transition="slide-up" v-ref:dropdown>
             <ul v-show="notFound" :class="[prefixCls + '-not-found']"><li>{{ notFoundText }}</li></ul>
-            <ul v-else :class="[prefixCls + '-dropdown-list']"><slot></slot></ul>
+            <ul v-else :class="[prefixCls + '-dropdown-list']" v-el:options><slot></slot></ul>
         </Dropdown>
     </div>
 </template>
@@ -34,7 +34,7 @@
     import Icon from '../icon';
     import Dropdown from './dropdown.vue';
     import clickoutside from '../../directives/clickoutside';
-    import { oneOf } from '../../utils/assist';
+    import { oneOf, MutationObserver } from '../../utils/assist';
  
     const prefixCls = 'ivu-select';
  
@@ -94,7 +94,8 @@
                 focusIndex: 0,
                 query: '',
                 inputLength: 20,
-                notFound: false
+                notFound: false,
+                slotChangeDuration: false    // if slot change duration and in multiple, set true and after slot change, set false
             }
         },
         computed: {
@@ -180,7 +181,7 @@
                     });
                 }
             },
-            updateOptions (init) {
+            updateOptions (init, slot = false) {
                 let options = [];
                 let index = 1;
  
@@ -199,20 +200,28 @@
                 this.options = options;
  
                 if (init) {
-                    this.updateSingleSelected(true);
-                    this.updateMultipleSelected(true);
+                    this.updateSingleSelected(true, slot);
+                    this.updateMultipleSelected(true, slot);
                 }
             },
-            updateSingleSelected (init = false) {
+            updateSingleSelected (init = false, slot = false) {
                 const type = typeof this.model;
  
                 if (type === 'string' || type === 'number') {
+                    let findModel = false;
+
                     for (let i = 0; i < this.options.length; i++) {
                         if (this.model === this.options[i].value) {
                             this.selectedSingle = this.options[i].label;
+                            findModel = true;
                             break;
                         }
                     }
+
+                    if (slot && !findModel) {
+                        this.model = '';
+                        this.query = '';
+                    }
                 }
  
                 this.toggleSingleSelected(this.model, init);
@@ -229,7 +238,7 @@
                     }
                 }
             },
-            updateMultipleSelected (init = false) {
+            updateMultipleSelected (init = false, slot = false) {
                 if (this.multiple && Array.isArray(this.model)) {
                     let selected = [];
  
@@ -249,8 +258,22 @@
                     }
  
                     this.selectedMultiple = selected;
-                }
  
+                    if (slot) {
+                        let selectedModel = [];
+
+                        for (let i = 0; i < selected.length; i++) {
+                            selectedModel.push(selected[i].value);
+                        }
+
+                        // if slot change and remove a selected option, emit user
+                        if (this.model.length === selectedModel.length) {
+                            this.slotChangeDuration = true;
+                        }
+
+                        this.model = selectedModel;
+                    }
+                }
                 this.toggleMultipleSelected(this.model, init);
             },
             removeTag (index) {
@@ -431,19 +454,46 @@
                 if (this.multiple && this.model.length && this.query === '') {
                     this.removeTag(this.model.length - 1);
                 }
+            },
+            // use when slot changed
+            slotChange () {
+                this.options = [];
+                this.optionInstances = [];
             }
         },
         ready () {
             this.updateOptions(true);
             document.addEventListener('keydown', this.handleKeydown);
+
+            // watch slot changed
+            if (MutationObserver) {
+                this.observer = new MutationObserver(() => {
+                    this.slotChange();
+                    this.updateOptions(true, true);
+                });
+
+                this.observer.observe(this.$els.options, {
+//                attributes: true,
+                    childList: true,
+                    characterData: true,
+                    subtree: true
+                });
+            }
         },
         beforeDestroy () {
             document.removeEventListener('keydown', this.handleKeydown);
+            if (this.observer) {
+                this.observer.disconnect();
+            }
         },
         watch: {
             model () {
                 if (this.multiple) {
-                    this.updateMultipleSelected();
+                    if (this.slotChangeDuration) {
+                        this.slotChangeDuration = false;
+                    } else {
+                        this.updateMultipleSelected();
+                    }
                 } else {
                     this.updateSingleSelected();
                 }
@@ -46,7 +46,7 @@
 @shadow-right           : 1px 0 6px @shadow-color;
  
 // Button
-@btn-font-weight        : 400;
+@btn-font-weight        : normal;
 @btn-padding-base       : 4px 15px;
 @btn-padding-large      : 6px 15px 7px 15px;
 @btn-padding-small      : 2px 7px;
@@ -49,4 +49,7 @@ export function getScrollBarSize (fresh) {
         cached = widthContained - widthScroll;
     }
     return cached;
-}
 \ No newline at end of file
+}
+
+// watch DOM change
+export const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver || false;
 \ No newline at end of file
 <template>
-    <div>
-        <br><br><br><br><br><br><br><br><br><br><br>
-        {{ city | json }}<br>
-        <Button @click="city = 'hangzhou'">切换城市</Button>
-        <br>
-        <i-select v-if="true" :model.sync="city" style="width:200px" filterable @on-change="change">
-            <i-option-group label="热门城市">
-                <i-option value="beijing">北京市</i-option>
-                <i-option value="shanghai" disabled label="上海市">上海市2</i-option>
-                <i-option value="shenzhen">深圳市</i-option>
-            </i-option-group>
-            <i-option-group label="二线城市">
-                <i-option value="nanjing">南京市</i-option>
-                <i-option value="hangzhou">杭州市</i-option>
-                <i-option value="heilongjiang" disabled>黑龙江市</i-option>
-            </i-option-group>
-            <i-option-group label="其它城市">
-                <i-option value="jyg">嘉峪关市</i-option>
-                <i-option value="lanzhou">兰州市</i-option>
-                <i-option value="beijingxi">北京西</i-option>
-            </i-option-group>
-        </i-select>
-
-        <i-select v-show="true" :model.sync="focus" style="width:200px" @on-change="change" clearable filterable label-in-value>
-            <i-option value="beijing">北京</i-option>
-            <i-option value="shanghai" label="上海市">上海市</i-option>
-            <i-option value="shenzhen" disabled>深圳市</i-option>
-            <i-option value="guangzhou" label="广州市">广州市2</i-option>
-            <i-option value="shijiazhuang" disabled>石家庄市</i-option>
-            <!--<i-option value="shijiazhuang2">石家庄市2</i-option>-->
-            <i-option value="a">a市</i-option>
-            <i-option value="b">b市</i-option>
-            <i-option value="c">c市</i-option>
-            <i-option value="d">d市</i-option>
-            <i-option value="e">e市</i-option>
-        </i-select>
-
-        <i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable filterable multiple>
-            <i-option value="beijing" label="北京市">北京2</i-option>
-            <i-option value="shanghai">上海市</i-option>
-            <i-option value="shenzhen" disabled>深圳市</i-option>
-            <i-option value="guangzhou">广州市</i-option>
-            <i-option value="shijiazhuang">石家庄市</i-option>
-            <i-option value="a">a1市</i-option>
-            <i-option value="b">b2市</i-option>
-            <i-option value="c">c1市</i-option>
-            <i-option value="d">d2市</i-option>
-            <i-option value="e">e1市</i-option>
-        </i-select>
-
-        <i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable multiple>
-            <i-option value="beijing" label="北京市">北京2</i-option>
-            <i-option value="shanghai">上海市</i-option>
-            <i-option value="shenzhen" disabled>深圳市</i-option>
-            <i-option value="guangzhou">广州市</i-option>
-            <i-option value="shijiazhuang">石家庄市</i-option>
-            <i-option value="a">a市</i-option>
-            <i-option value="b">b市</i-option>
-            <i-option value="c">c市</i-option>
-            <i-option value="d">d市</i-option>
-            <i-option value="e">e市</i-option>
-        </i-select>
-
-        <br><br><br><br><br><br><br><br><br><br><br><br>
-    </div>
+    <!--<i-select :model.sync="model1" style="width:200px">-->
+        <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
+    <!--</i-select>-->
+    <!--{{ model1 | json }}-->
+    <i-button @click="change">修改数据</i-button>
+    <!--<i-select :model.sync="model10" multiple style="width:240px" @on-change="datachange">-->
+        <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
+    <!--</i-select>-->
+    <!--{{ model10 | json }}-->
+    <!--<i-select :model.sync="model11" filterable style="width:200px" @on-change="datachange">-->
+        <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
+    <!--</i-select>-->
+    <!--{{ model11 | json }}-->
+    <i-select :model.sync="model12" filterable multiple style="width:240px" @on-change="datachange">
+        <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
+    </i-select>
+    {{ model12 | json }}
 </template>
 <script>
-    import { iSelect, iOption, iOptionGroup, Button } from 'iview';
-
+    import { iSelect, iOption, iButton } from 'iview';
     export default {
-        components: {
-            iSelect,
-            iOption,
-            iOptionGroup,
-            Button
-        },
-        props: {
-
-        },
+        components: { iSelect, iOption, iButton },
         data () {
             return {
-                city: '',
-                focus: '',
-                focus2: ['beijing']
-//                focus2: []
+                cityList: [
+                    {
+                        value: 'beijing',
+                        label: '北京市'
+                    },
+                    {
+                        value: 'shanghai',
+                        label: '上海市'
+                    },
+                    {
+                        value: 'shenzhen',
+                        label: '深圳市'
+                    },
+                    {
+                        value: 'hangzhou',
+                        label: '杭州市'
+                    },
+                    {
+                        value: 'nanjing',
+                        label: '南京市'
+                    },
+                    {
+                        value: 'chongqing',
+                        label: '重庆市'
+                    }
+                ],
+                model1: '',
+                model10: [],
+                model11: '',
+                model12: []
             }
         },
-        computed: {
-
-        },
         methods: {
-            change (data) {
-                console.log(data)
+            change () {
+                this.cityList.splice(2, 1);
+            },
+            datachange (data) {
+                console.log(data);
             }
         }
     }
-</script>
 \ No newline at end of file
+</script>
@@ -28,10 +28,23 @@
     <Tag type="border" color="red" closable>标签一</Tag>
     <Tag type="border" color="yellow">标签一</Tag>
     <Tag type="border" color="yellow" closable>标签一</Tag>
+    <i-button type="primary" @click="modal1 = true">显示对话框</i-button>
+    <Modal
+            :visible.sync="modal1"
+            title="普通的Modal对话框标题">
+        <p>对话框内容</p>
+        <p>对话框内容</p>
+        <p>对话框内容</p>
+    </Modal>
 </template>
 <script>
-    import { Tag } from 'iview';
+    import { Tag, Modal, iButton } from 'iview';
     export default {
-        components: { Tag }
+        components: { Tag, Modal, iButton },
+        data () {
+            return {
+                modal1: false
+            }
+        }
     }
 </script>