Commit feb21a0a16e3c68a137af188fe81d2fc346d71dd
1 parent
037de052
fixed #2893
Showing
2 changed files
with
96 additions
and
36 deletions
Show diff stats
examples/routers/select.vue
| @@ -167,50 +167,105 @@ | @@ -167,50 +167,105 @@ | ||
| 167 | <!--}--> | 167 | <!--}--> |
| 168 | <!--</script>--> | 168 | <!--</script>--> |
| 169 | 169 | ||
| 170 | +<!--<template>--> | ||
| 171 | + <!--<div style="width: 300px">--> | ||
| 172 | + <!--<Select--> | ||
| 173 | + <!--v-model="model14"--> | ||
| 174 | + <!--multiple--> | ||
| 175 | + <!--filterable--> | ||
| 176 | + <!--remote--> | ||
| 177 | + <!--:remote-method="remoteMethod2"--> | ||
| 178 | + <!--:loading="loading2">--> | ||
| 179 | + <!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>--> | ||
| 180 | + <!--</Select>--> | ||
| 181 | + <!--</div>--> | ||
| 182 | +<!--</template>--> | ||
| 183 | +<!--<script>--> | ||
| 184 | + <!--export default {--> | ||
| 185 | + <!--data () {--> | ||
| 186 | + <!--return {--> | ||
| 187 | + <!--model13: '',--> | ||
| 188 | + <!--loading1: false,--> | ||
| 189 | + <!--options1: [],--> | ||
| 190 | + <!--model14: [],--> | ||
| 191 | + <!--loading2: false,--> | ||
| 192 | + <!--options2: [],--> | ||
| 193 | + <!--list: ['a', 'b', 'c']--> | ||
| 194 | + <!--}--> | ||
| 195 | + <!--},--> | ||
| 196 | + <!--methods: {--> | ||
| 197 | + <!--remoteMethod2 (query) {--> | ||
| 198 | + <!--if (query !== '') {--> | ||
| 199 | + <!--this.loading2 = true;--> | ||
| 200 | + <!--setTimeout(() => {--> | ||
| 201 | + <!--this.loading2 = false;--> | ||
| 202 | + <!--const list = this.list.map(item => {--> | ||
| 203 | + <!--return {--> | ||
| 204 | + <!--value: item,--> | ||
| 205 | + <!--label: item--> | ||
| 206 | + <!--};--> | ||
| 207 | + <!--});--> | ||
| 208 | + <!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);--> | ||
| 209 | + <!--}, 200);--> | ||
| 210 | + <!--} else {--> | ||
| 211 | + <!--this.options2 = [];--> | ||
| 212 | + <!--}--> | ||
| 213 | + <!--}--> | ||
| 214 | + <!--}--> | ||
| 215 | + <!--}--> | ||
| 216 | +<!--</script>--> | ||
| 217 | + | ||
| 218 | + | ||
| 170 | <template> | 219 | <template> |
| 171 | - <div style="width: 300px"> | ||
| 172 | - <Select | ||
| 173 | - v-model="model14" | ||
| 174 | - multiple | ||
| 175 | - filterable | ||
| 176 | - remote | ||
| 177 | - :remote-method="remoteMethod2" | ||
| 178 | - :loading="loading2"> | ||
| 179 | - <Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option> | 220 | + <Row> |
| 221 | + <Col span="12" style="padding-right:10px"> | ||
| 222 | + <Select v-model="model11" disabled filterable> | ||
| 223 | + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | ||
| 180 | </Select> | 224 | </Select> |
| 181 | - </div> | 225 | + </Col> |
| 226 | + <Col span="12"> | ||
| 227 | + <!--<Select v-model="model12" filterable multiple>--> | ||
| 228 | + <!--<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>--> | ||
| 229 | + <!--</Select>--> | ||
| 230 | + <Input v-model="model13" disabled="" /> | ||
| 231 | + </Col> | ||
| 232 | + </Row> | ||
| 182 | </template> | 233 | </template> |
| 183 | <script> | 234 | <script> |
| 184 | export default { | 235 | export default { |
| 185 | data () { | 236 | data () { |
| 186 | return { | 237 | return { |
| 187 | - model13: '', | ||
| 188 | - loading1: false, | ||
| 189 | - options1: [], | ||
| 190 | - model14: [], | ||
| 191 | - loading2: false, | ||
| 192 | - options2: [], | ||
| 193 | - list: ['a', 'b', 'c'] | ||
| 194 | - } | ||
| 195 | - }, | ||
| 196 | - methods: { | ||
| 197 | - remoteMethod2 (query) { | ||
| 198 | - if (query !== '') { | ||
| 199 | - this.loading2 = true; | ||
| 200 | - setTimeout(() => { | ||
| 201 | - this.loading2 = false; | ||
| 202 | - const list = this.list.map(item => { | ||
| 203 | - return { | ||
| 204 | - value: item, | ||
| 205 | - label: item | ||
| 206 | - }; | ||
| 207 | - }); | ||
| 208 | - this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1); | ||
| 209 | - }, 200); | ||
| 210 | - } else { | ||
| 211 | - this.options2 = []; | ||
| 212 | - } | 238 | + cityList: [ |
| 239 | + { | ||
| 240 | + value: 'New York', | ||
| 241 | + label: 'New York' | ||
| 242 | + }, | ||
| 243 | + { | ||
| 244 | + value: 'London', | ||
| 245 | + label: 'London' | ||
| 246 | + }, | ||
| 247 | + { | ||
| 248 | + value: 'Sydney', | ||
| 249 | + label: 'Sydney' | ||
| 250 | + }, | ||
| 251 | + { | ||
| 252 | + value: 'Ottawa', | ||
| 253 | + label: 'Ottawa' | ||
| 254 | + }, | ||
| 255 | + { | ||
| 256 | + value: 'Paris', | ||
| 257 | + label: 'Paris' | ||
| 258 | + }, | ||
| 259 | + { | ||
| 260 | + value: 'Canberra', | ||
| 261 | + label: 'Canberra' | ||
| 262 | + } | ||
| 263 | + ], | ||
| 264 | + model11: 'New York', | ||
| 265 | + model12: [], | ||
| 266 | + model13: 'New York' | ||
| 213 | } | 267 | } |
| 214 | } | 268 | } |
| 215 | } | 269 | } |
| 216 | </script> | 270 | </script> |
| 271 | + |
src/styles/components/select.less
| @@ -149,6 +149,11 @@ | @@ -149,6 +149,11 @@ | ||
| 149 | position: relative; | 149 | position: relative; |
| 150 | cursor: pointer; | 150 | cursor: pointer; |
| 151 | .placeholder(); | 151 | .placeholder(); |
| 152 | + | ||
| 153 | + &[disabled]{ | ||
| 154 | + cursor: @cursor-disabled; | ||
| 155 | + color: #ccc; | ||
| 156 | + } | ||
| 152 | } | 157 | } |
| 153 | 158 | ||
| 154 | &-single &-input{ | 159 | &-single &-input{ |