fixed #196

fixed #196

fixed #196
梁灏
1 parent f5ecd167
Showing 3 changed files with 48 additions and 8 deletions Show diff stats
src/components/select/dropdown.vue
src/components/select/select.vue
test/routers/select.vue
 <template>
-    <div class="ivu-select-dropdown"><slot></slot></div>
+    <div class="ivu-select-dropdown" :style="styles"><slot></slot></div>
 </template>
 <script>
+    import { getStyle } from '../../utils/assist';
     import Popper from 'popper.js';
  
     export default {
@@ -13,9 +14,17 @@
         },
         data () {
             return {
-                popper: null
+                popper: null,
+                width: '',
             };
         },
+        computed: {
+            styles () {
+                let style = {};
+                if (this.width) style.width = `${this.width}px`;
+                return style;
+            }
+        },
         methods: {
             update () {
                 if (this.popper) {
@@ -36,6 +45,10 @@
                         });
                     });
                 }
+                // set a height for parent is Modal and Select's width is 100%
+                if (this.$parent.$options.name === 'iSelect') {
+                    this.width = parseInt(getStyle(this.$parent.$el, 'width'));
+                }
             },
             destroy () {
                 if (this.popper) {
@@ -40,6 +40,7 @@
     const prefixCls = 'ivu-select';
  
     export default {
+        name: 'iSelect',
         components: { Icon, Dropdown },
         directives: { clickoutside },
         props: {
 <template>
-    <i-select :model.sync="model7" style="width:200px"
-              filterable>
-        <i-option v-for="item in cityList | limitBy 3" :value="item.value">{{ item.label }}</i-option>
-        <i-option v-for="item in cityList | limitBy 3 3" :value="item.value">{{ item.label }}</i-option>
-    </i-select>
+    <i-button type="primary" @click="modal1 = true">i-selelct加入width样式</i-button>
+    <i-button type="primary" @click="modal2 = true">i-selelct没有加入width样式</i-button>
+
+    <Modal
+            :visible.sync="modal1"
+            title="普通的Modal对话框标题">
+        <i-select :model.sync="model1" :style="modalStyle">
+            <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
+        </i-select>
+    </Modal>
+
+    <Modal
+            :visible.sync="modal2"
+            title="普通的Modal对话框标题">
+        <i-select :model.sync="model1" :style="modalStyle">
+            <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
+        </i-select>
+    </Modal>
 </template>
 <script>
     export default {
         data () {
             return {
+                modal1: false,
+                modal2: false,
+                modalStyle: '',
                 cityList: [
                     {
                         value: 'beijing',
@@ -35,7 +51,17 @@
                         label: '重庆市'
                     }
                 ],
-                model7: ''
+                model1: ''
+            }
+        },
+        computed: {
+            modalStyle: function(){
+                let s = ""
+                if (this.modal1)
+                    s = "width: 200px"
+                if (this.modal2)
+                    s = ""
+                return s
             }
         }
     }