Commit 15b72d31b000e8c701b1d8302d3a8613026308ae
1 parent
7409cb3c
fixed #566
Showing
2 changed files
with
43 additions
and
226 deletions
Show diff stats
examples/routers/select.vue
| 1 | -<!--<template>--> | |
| 2 | - <!--<div>--> | |
| 3 | - <!--<i-select v-model="model1" style="width:200px" clearable>--> | |
| 4 | - <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>--> | |
| 5 | - <!--</i-select>--> | |
| 6 | - <!--{{ model1 }}--> | |
| 7 | - <!--<div @click="c">change</div>--> | |
| 8 | - <!--</div>--> | |
| 9 | -<!--</template>--> | |
| 10 | -<!--<script>--> | |
| 11 | - <!--export default {--> | |
| 12 | - <!--data () {--> | |
| 13 | - <!--return {--> | |
| 14 | - <!--cityList: [--> | |
| 15 | - <!--{--> | |
| 16 | - <!--value: 'beijing',--> | |
| 17 | - <!--label: '北京市'--> | |
| 18 | - <!--},--> | |
| 19 | - <!--{--> | |
| 20 | - <!--value: 'shanghai',--> | |
| 21 | - <!--label: '上海市'--> | |
| 22 | - <!--},--> | |
| 23 | - <!--{--> | |
| 24 | - <!--value: 'shenzhen',--> | |
| 25 | - <!--label: '深圳市'--> | |
| 26 | - <!--},--> | |
| 27 | - <!--{--> | |
| 28 | - <!--value: 'hangzhou',--> | |
| 29 | - <!--label: '杭州市'--> | |
| 30 | - <!--},--> | |
| 31 | - <!--{--> | |
| 32 | - <!--value: 'nanjing',--> | |
| 33 | - <!--label: '南京市'--> | |
| 34 | - <!--},--> | |
| 35 | - <!--{--> | |
| 36 | - <!--value: 'chongqing',--> | |
| 37 | - <!--label: '重庆市'--> | |
| 38 | - <!--}--> | |
| 39 | - <!--],--> | |
| 40 | - <!--model1: ''--> | |
| 41 | - <!--}--> | |
| 42 | - <!--},--> | |
| 43 | - <!--methods: {--> | |
| 44 | - <!--c () {--> | |
| 45 | - <!--this.model1 = 'hangzhou'--> | |
| 46 | - <!--}--> | |
| 47 | - <!--}--> | |
| 48 | - <!--}--> | |
| 49 | -<!--</script>--> | |
| 50 | - | |
| 51 | - | |
| 52 | -<!--<template>--> | |
| 53 | - <!--<div>--> | |
| 54 | - <!--<i-select v-model="model5" disabled style="width:200px">--> | |
| 55 | - <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>--> | |
| 56 | - <!--</i-select>--> | |
| 57 | - <!--<i-select v-model="model6" style="width:200px">--> | |
| 58 | - <!--<i-option value="beijing">北京市</i-option>--> | |
| 59 | - <!--<i-option value="shanghai" disabled>上海市</i-option>--> | |
| 60 | - <!--<i-option value="shenzhen">深圳市</i-option>--> | |
| 61 | - <!--</i-select>--> | |
| 62 | - <!--</div>--> | |
| 63 | -<!--</template>--> | |
| 64 | -<!--<script>--> | |
| 65 | - <!--export default {--> | |
| 66 | - <!--data () {--> | |
| 67 | - <!--return {--> | |
| 68 | - <!--cityList: [--> | |
| 69 | - <!--{--> | |
| 70 | - <!--value: 'beijing',--> | |
| 71 | - <!--label: '北京市'--> | |
| 72 | - <!--},--> | |
| 73 | - <!--{--> | |
| 74 | - <!--value: 'shanghai',--> | |
| 75 | - <!--label: '上海市'--> | |
| 76 | - <!--},--> | |
| 77 | - <!--{--> | |
| 78 | - <!--value: 'shenzhen',--> | |
| 79 | - <!--label: '深圳市'--> | |
| 80 | - <!--},--> | |
| 81 | - <!--{--> | |
| 82 | - <!--value: 'hangzhou',--> | |
| 83 | - <!--label: '杭州市'--> | |
| 84 | - <!--},--> | |
| 85 | - <!--{--> | |
| 86 | - <!--value: 'nanjing',--> | |
| 87 | - <!--label: '南京市'--> | |
| 88 | - <!--},--> | |
| 89 | - <!--{--> | |
| 90 | - <!--value: 'chongqing',--> | |
| 91 | - <!--label: '重庆市'--> | |
| 92 | - <!--}--> | |
| 93 | - <!--],--> | |
| 94 | - <!--model5: '',--> | |
| 95 | - <!--model6: ''--> | |
| 96 | - <!--}--> | |
| 97 | - <!--}--> | |
| 98 | - <!--}--> | |
| 99 | -<!--</script>--> | |
| 100 | - | |
| 101 | - | |
| 102 | - | |
| 103 | -<!--<template>--> | |
| 104 | - <!--<div>--> | |
| 105 | - <!--<i-select v-model="model7" style="width:200px">--> | |
| 106 | - <!--<Option-group label="热门城市">--> | |
| 107 | - <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>--> | |
| 108 | - <!--</Option-group>--> | |
| 109 | - <!--<Option-group label="其它城市">--> | |
| 110 | - <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>--> | |
| 111 | - <!--</Option-group>--> | |
| 112 | - <!--</i-select>--> | |
| 113 | - <!--</div>--> | |
| 114 | -<!--</template>--> | |
| 115 | -<!--<script>--> | |
| 116 | - <!--export default {--> | |
| 117 | - <!--data () {--> | |
| 118 | - <!--return {--> | |
| 119 | - <!--cityList: [--> | |
| 120 | - <!--{--> | |
| 121 | - <!--value: 'beijing',--> | |
| 122 | - <!--label: '北京市'--> | |
| 123 | - <!--},--> | |
| 124 | - <!--{--> | |
| 125 | - <!--value: 'shanghai',--> | |
| 126 | - <!--label: '上海市'--> | |
| 127 | - <!--},--> | |
| 128 | - <!--{--> | |
| 129 | - <!--value: 'shenzhen',--> | |
| 130 | - <!--label: '深圳市'--> | |
| 131 | - <!--},--> | |
| 132 | - <!--{--> | |
| 133 | - <!--value: 'hangzhou',--> | |
| 134 | - <!--label: '杭州市'--> | |
| 135 | - <!--},--> | |
| 136 | - <!--{--> | |
| 137 | - <!--value: 'nanjing',--> | |
| 138 | - <!--label: '南京市'--> | |
| 139 | - <!--},--> | |
| 140 | - <!--{--> | |
| 141 | - <!--value: 'chongqing',--> | |
| 142 | - <!--label: '重庆市'--> | |
| 143 | - <!--}--> | |
| 144 | - <!--],--> | |
| 145 | - <!--model7: ''--> | |
| 146 | - <!--}--> | |
| 147 | - <!--}--> | |
| 148 | - <!--}--> | |
| 149 | -<!--</script>--> | |
| 150 | - | |
| 151 | -<!--<template>--> | |
| 152 | - <!--<div>--> | |
| 153 | - <!--<i-select v-model="model10" multiple style="width:260px">--> | |
| 154 | - <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>--> | |
| 155 | - <!--</i-select>--> | |
| 156 | - <!--</div>--> | |
| 157 | -<!--</template>--> | |
| 158 | -<!--<script>--> | |
| 159 | - <!--export default {--> | |
| 160 | - <!--data () {--> | |
| 161 | - <!--return {--> | |
| 162 | - <!--cityList: [--> | |
| 163 | - <!--{--> | |
| 164 | - <!--value: 'beijing',--> | |
| 165 | - <!--label: '北京市'--> | |
| 166 | - <!--},--> | |
| 167 | - <!--{--> | |
| 168 | - <!--value: 'shanghai',--> | |
| 169 | - <!--label: '上海市'--> | |
| 170 | - <!--},--> | |
| 171 | - <!--{--> | |
| 172 | - <!--value: 'shenzhen',--> | |
| 173 | - <!--label: '深圳市'--> | |
| 174 | - <!--},--> | |
| 175 | - <!--{--> | |
| 176 | - <!--value: 'hangzhou',--> | |
| 177 | - <!--label: '杭州市'--> | |
| 178 | - <!--},--> | |
| 179 | - <!--{--> | |
| 180 | - <!--value: 'nanjing',--> | |
| 181 | - <!--label: '南京市'--> | |
| 182 | - <!--},--> | |
| 183 | - <!--{--> | |
| 184 | - <!--value: 'chongqing',--> | |
| 185 | - <!--label: '重庆市'--> | |
| 186 | - <!--}--> | |
| 187 | - <!--],--> | |
| 188 | - <!--model10: []--> | |
| 189 | - <!--}--> | |
| 190 | - <!--}--> | |
| 191 | - <!--}--> | |
| 192 | -<!--</script>--> | |
| 193 | - | |
| 194 | 1 | <template> |
| 195 | - <div style="margin: 1000px 0 0 "> | |
| 196 | - <Select v-model="model1" style="width:200px"> | |
| 2 | + <Row> | |
| 3 | + <i-col span="12" style="padding-right:10px"> | |
| 4 | + <Select v-model="model11" filterable> | |
| 197 | 5 | <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option> |
| 198 | 6 | </Select> |
| 199 | - {{ model1 }} | |
| 200 | - <Button @click="set">set</Button> | |
| 201 | - <Button @click="add">add</Button> | |
| 202 | - <Button @click="remove">remove</Button> | |
| 203 | - </div> | |
| 7 | + </i-col> | |
| 8 | + <i-col span="12"> | |
| 9 | + <Select v-model="model12" filterable multiple> | |
| 10 | + <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option> | |
| 11 | + </Select> | |
| 12 | + </i-col> | |
| 13 | + </Row> | |
| 204 | 14 | </template> |
| 205 | 15 | <script> |
| 206 | 16 | export default { |
| ... | ... | @@ -218,26 +28,22 @@ |
| 218 | 28 | { |
| 219 | 29 | value: 'shenzhen', |
| 220 | 30 | label: '深圳市' |
| 31 | + }, | |
| 32 | + { | |
| 33 | + value: 'hangzhou', | |
| 34 | + label: '杭州市' | |
| 35 | + }, | |
| 36 | + { | |
| 37 | + value: 'nanjing', | |
| 38 | + label: '南京市' | |
| 39 | + }, | |
| 40 | + { | |
| 41 | + value: 'chongqing', | |
| 42 | + label: '重庆市' | |
| 221 | 43 | } |
| 222 | 44 | ], |
| 223 | - model1: '' | |
| 224 | - } | |
| 225 | - }, | |
| 226 | - methods: { | |
| 227 | - clear(){ | |
| 228 | - this.d = []; | |
| 229 | - }, | |
| 230 | - set () { | |
| 231 | - this.model1 = 'shenzhen'; | |
| 232 | - }, | |
| 233 | - add () { | |
| 234 | - this.cityList.push({ | |
| 235 | - value: 'chongqing', | |
| 236 | - label: '重庆市' | |
| 237 | - }); | |
| 238 | - }, | |
| 239 | - remove () { | |
| 240 | - this.cityList.splice(0, 1); | |
| 45 | + model11: '', | |
| 46 | + model12: [] | |
| 241 | 47 | } |
| 242 | 48 | } |
| 243 | 49 | } | ... | ... |
src/components/select/select.vue
| ... | ... | @@ -506,6 +506,14 @@ |
| 506 | 506 | } |
| 507 | 507 | }); |
| 508 | 508 | } |
| 509 | + }, | |
| 510 | + broadcastQuery (val) { | |
| 511 | + if (findComponentDownward(this, 'OptionGroup')) { | |
| 512 | + this.broadcast('OptionGroup', 'on-query-change', val); | |
| 513 | + this.broadcast('iOption', 'on-query-change', val); | |
| 514 | + } else { | |
| 515 | + this.broadcast('iOption', 'on-query-change', val); | |
| 516 | + } | |
| 509 | 517 | } |
| 510 | 518 | }, |
| 511 | 519 | mounted () { |
| ... | ... | @@ -579,13 +587,21 @@ |
| 579 | 587 | }, |
| 580 | 588 | visible (val) { |
| 581 | 589 | if (val) { |
| 582 | - if (this.multiple && this.filterable) { | |
| 583 | - this.$refs.input.focus(); | |
| 590 | + if (this.filterable) { | |
| 591 | + if (this.multiple) { | |
| 592 | + this.$refs.input.focus(); | |
| 593 | + } else { | |
| 594 | + this.$refs.input.select(); | |
| 595 | + } | |
| 584 | 596 | } |
| 585 | 597 | this.broadcast('Drop', 'on-update-popper'); |
| 586 | 598 | } else { |
| 587 | 599 | if (this.filterable) { |
| 588 | 600 | this.$refs.input.blur(); |
| 601 | + // #566 reset options visible | |
| 602 | + setTimeout(() => { | |
| 603 | + this.broadcastQuery(''); | |
| 604 | + }, 300); | |
| 589 | 605 | } |
| 590 | 606 | this.broadcast('Drop', 'on-destroy-popper'); |
| 591 | 607 | } |
| ... | ... | @@ -593,12 +609,7 @@ |
| 593 | 609 | query (val) { |
| 594 | 610 | this.$emit('on-query-change', val); |
| 595 | 611 | |
| 596 | - if (findComponentDownward(this, 'OptionGroup')) { | |
| 597 | - this.broadcast('OptionGroup', 'on-query-change', val); | |
| 598 | - this.broadcast('iOption', 'on-query-change', val); | |
| 599 | - } else { | |
| 600 | - this.broadcast('iOption', 'on-query-change', val); | |
| 601 | - } | |
| 612 | + this.broadcastQuery(val); | |
| 602 | 613 | |
| 603 | 614 | let is_hidden = true; |
| 604 | 615 | ... | ... |