Commit 8f5b16867d7ed15ab0812fb125fc744ecd1a235e
1 parent
f5ecd167
fixed #196
fixed #196
Showing
3 changed files
with
48 additions
and
8 deletions
Show diff stats
src/components/select/dropdown.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div class="ivu-select-dropdown"><slot></slot></div> | 2 | + <div class="ivu-select-dropdown" :style="styles"><slot></slot></div> |
| 3 | </template> | 3 | </template> |
| 4 | <script> | 4 | <script> |
| 5 | + import { getStyle } from '../../utils/assist'; | ||
| 5 | import Popper from 'popper.js'; | 6 | import Popper from 'popper.js'; |
| 6 | 7 | ||
| 7 | export default { | 8 | export default { |
| @@ -13,9 +14,17 @@ | @@ -13,9 +14,17 @@ | ||
| 13 | }, | 14 | }, |
| 14 | data () { | 15 | data () { |
| 15 | return { | 16 | return { |
| 16 | - popper: null | 17 | + popper: null, |
| 18 | + width: '', | ||
| 17 | }; | 19 | }; |
| 18 | }, | 20 | }, |
| 21 | + computed: { | ||
| 22 | + styles () { | ||
| 23 | + let style = {}; | ||
| 24 | + if (this.width) style.width = `${this.width}px`; | ||
| 25 | + return style; | ||
| 26 | + } | ||
| 27 | + }, | ||
| 19 | methods: { | 28 | methods: { |
| 20 | update () { | 29 | update () { |
| 21 | if (this.popper) { | 30 | if (this.popper) { |
| @@ -36,6 +45,10 @@ | @@ -36,6 +45,10 @@ | ||
| 36 | }); | 45 | }); |
| 37 | }); | 46 | }); |
| 38 | } | 47 | } |
| 48 | + // set a height for parent is Modal and Select's width is 100% | ||
| 49 | + if (this.$parent.$options.name === 'iSelect') { | ||
| 50 | + this.width = parseInt(getStyle(this.$parent.$el, 'width')); | ||
| 51 | + } | ||
| 39 | }, | 52 | }, |
| 40 | destroy () { | 53 | destroy () { |
| 41 | if (this.popper) { | 54 | if (this.popper) { |
src/components/select/select.vue
| @@ -40,6 +40,7 @@ | @@ -40,6 +40,7 @@ | ||
| 40 | const prefixCls = 'ivu-select'; | 40 | const prefixCls = 'ivu-select'; |
| 41 | 41 | ||
| 42 | export default { | 42 | export default { |
| 43 | + name: 'iSelect', | ||
| 43 | components: { Icon, Dropdown }, | 44 | components: { Icon, Dropdown }, |
| 44 | directives: { clickoutside }, | 45 | directives: { clickoutside }, |
| 45 | props: { | 46 | props: { |
test/routers/select.vue
| 1 | <template> | 1 | <template> |
| 2 | - <i-select :model.sync="model7" style="width:200px" | ||
| 3 | - filterable> | ||
| 4 | - <i-option v-for="item in cityList | limitBy 3" :value="item.value">{{ item.label }}</i-option> | ||
| 5 | - <i-option v-for="item in cityList | limitBy 3 3" :value="item.value">{{ item.label }}</i-option> | ||
| 6 | - </i-select> | 2 | + <i-button type="primary" @click="modal1 = true">i-selelct加入width样式</i-button> |
| 3 | + <i-button type="primary" @click="modal2 = true">i-selelct没有加入width样式</i-button> | ||
| 4 | + | ||
| 5 | + <Modal | ||
| 6 | + :visible.sync="modal1" | ||
| 7 | + title="普通的Modal对话框标题"> | ||
| 8 | + <i-select :model.sync="model1" :style="modalStyle"> | ||
| 9 | + <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option> | ||
| 10 | + </i-select> | ||
| 11 | + </Modal> | ||
| 12 | + | ||
| 13 | + <Modal | ||
| 14 | + :visible.sync="modal2" | ||
| 15 | + title="普通的Modal对话框标题"> | ||
| 16 | + <i-select :model.sync="model1" :style="modalStyle"> | ||
| 17 | + <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option> | ||
| 18 | + </i-select> | ||
| 19 | + </Modal> | ||
| 7 | </template> | 20 | </template> |
| 8 | <script> | 21 | <script> |
| 9 | export default { | 22 | export default { |
| 10 | data () { | 23 | data () { |
| 11 | return { | 24 | return { |
| 25 | + modal1: false, | ||
| 26 | + modal2: false, | ||
| 27 | + modalStyle: '', | ||
| 12 | cityList: [ | 28 | cityList: [ |
| 13 | { | 29 | { |
| 14 | value: 'beijing', | 30 | value: 'beijing', |
| @@ -35,7 +51,17 @@ | @@ -35,7 +51,17 @@ | ||
| 35 | label: '重庆市' | 51 | label: '重庆市' |
| 36 | } | 52 | } |
| 37 | ], | 53 | ], |
| 38 | - model7: '' | 54 | + model1: '' |
| 55 | + } | ||
| 56 | + }, | ||
| 57 | + computed: { | ||
| 58 | + modalStyle: function(){ | ||
| 59 | + let s = "" | ||
| 60 | + if (this.modal1) | ||
| 61 | + s = "width: 200px" | ||
| 62 | + if (this.modal2) | ||
| 63 | + s = "" | ||
| 64 | + return s | ||
| 39 | } | 65 | } |
| 40 | } | 66 | } |
| 41 | } | 67 | } |