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 | <template> | 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 | <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option> | 5 | <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option> |
| 198 | </Select> | 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 | </template> | 14 | </template> |
| 205 | <script> | 15 | <script> |
| 206 | export default { | 16 | export default { |
| @@ -218,26 +28,22 @@ | @@ -218,26 +28,22 @@ | ||
| 218 | { | 28 | { |
| 219 | value: 'shenzhen', | 29 | value: 'shenzhen', |
| 220 | label: '深圳市' | 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,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 | mounted () { | 519 | mounted () { |
| @@ -579,13 +587,21 @@ | @@ -579,13 +587,21 @@ | ||
| 579 | }, | 587 | }, |
| 580 | visible (val) { | 588 | visible (val) { |
| 581 | if (val) { | 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 | this.broadcast('Drop', 'on-update-popper'); | 597 | this.broadcast('Drop', 'on-update-popper'); |
| 586 | } else { | 598 | } else { |
| 587 | if (this.filterable) { | 599 | if (this.filterable) { |
| 588 | this.$refs.input.blur(); | 600 | this.$refs.input.blur(); |
| 601 | + // #566 reset options visible | ||
| 602 | + setTimeout(() => { | ||
| 603 | + this.broadcastQuery(''); | ||
| 604 | + }, 300); | ||
| 589 | } | 605 | } |
| 590 | this.broadcast('Drop', 'on-destroy-popper'); | 606 | this.broadcast('Drop', 'on-destroy-popper'); |
| 591 | } | 607 | } |
| @@ -593,12 +609,7 @@ | @@ -593,12 +609,7 @@ | ||
| 593 | query (val) { | 609 | query (val) { |
| 594 | this.$emit('on-query-change', val); | 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 | let is_hidden = true; | 614 | let is_hidden = true; |
| 604 | 615 |