Commit 5ddf1bcf4f76a2ad8e6c4ecf394a59403003f60f
1 parent
ce176e21
fixed #2451
Showing
2 changed files
with
468 additions
and
361 deletions
Show diff stats
examples/routers/select.vue
| ... | ... | @@ -293,377 +293,447 @@ |
| 293 | 293 | <!--}--> |
| 294 | 294 | <!--</script>--> |
| 295 | 295 | |
| 296 | +<!--<template>--> | |
| 297 | + <!--<div id="app">--> | |
| 298 | + <!--<input><br>--> | |
| 299 | + <!--<i-select--> | |
| 300 | + <!--v-model="model1"--> | |
| 301 | + <!--style="width:200px"--> | |
| 302 | + <!-->--> | |
| 303 | + <!--<i-option--> | |
| 304 | + <!--v-for="item in cityList"--> | |
| 305 | + <!--:value="item.value"--> | |
| 306 | + <!--:key="item.value"--> | |
| 307 | + <!-->{{item.label}}</i-option>--> | |
| 308 | + <!--</i-select>--> | |
| 309 | + <!--<br>--> | |
| 310 | + <!--<i-select--> | |
| 311 | + <!--v-model="model2"--> | |
| 312 | + <!--size="small"--> | |
| 313 | + <!--style="width:100px"--> | |
| 314 | + <!-->--> | |
| 315 | + <!--<i-option--> | |
| 316 | + <!--v-for="item in cityList"--> | |
| 317 | + <!--:value="item.value"--> | |
| 318 | + <!--:key="item.value"--> | |
| 319 | + <!-->{{item.label}}</i-option>--> | |
| 320 | + <!--</i-select>--> | |
| 321 | + <!--<i-select--> | |
| 322 | + <!--v-model="model3"--> | |
| 323 | + <!--style="width:100px"--> | |
| 324 | + <!-->--> | |
| 325 | + <!--<i-option--> | |
| 326 | + <!--v-for="item in cityList"--> | |
| 327 | + <!--:value="item.value"--> | |
| 328 | + <!--:key="item.value"--> | |
| 329 | + <!-->{{item.label}}</i-option>--> | |
| 330 | + <!--</i-select>--> | |
| 331 | + <!--<i-select--> | |
| 332 | + <!--v-model="model4"--> | |
| 333 | + <!--size="large"--> | |
| 334 | + <!--style="width:100px"--> | |
| 335 | + <!-->--> | |
| 336 | + <!--<i-option--> | |
| 337 | + <!--v-for="item in cityList"--> | |
| 338 | + <!--:value="item.value"--> | |
| 339 | + <!--:key="item.value"--> | |
| 340 | + <!-->{{item.label}}</i-option>--> | |
| 341 | + <!--</i-select>--> | |
| 342 | + <!--<br>--> | |
| 343 | + <!--<i-select--> | |
| 344 | + <!--v-model="model5"--> | |
| 345 | + <!--disabled--> | |
| 346 | + <!--style="width:200px"--> | |
| 347 | + <!-->--> | |
| 348 | + <!--<i-option--> | |
| 349 | + <!--v-for="item in cityList"--> | |
| 350 | + <!--:value="item.value"--> | |
| 351 | + <!--:key="item.value"--> | |
| 352 | + <!-->{{item.label}}</i-option>--> | |
| 353 | + <!--</i-select>--> | |
| 354 | + <!--<i-select--> | |
| 355 | + <!--v-model="model6"--> | |
| 356 | + <!--style="width:200px"--> | |
| 357 | + <!-->--> | |
| 358 | + <!--<i-option value="beijing">New York</i-option>--> | |
| 359 | + <!--<i-option value="shanghai" disabled>London</i-option>--> | |
| 360 | + <!--<i-option value="shenzhen">Sydney</i-option>--> | |
| 361 | + <!--</i-select>--> | |
| 362 | + <!--<br>--> | |
| 363 | + <!--<i-select--> | |
| 364 | + <!--v-model="model8"--> | |
| 365 | + <!--clearable--> | |
| 366 | + <!--style="width:200px"--> | |
| 367 | + <!-->--> | |
| 368 | + <!--<i-option--> | |
| 369 | + <!--v-for="item in cityList"--> | |
| 370 | + <!--:value="item.value"--> | |
| 371 | + <!--:key="item.value"--> | |
| 372 | + <!-->{{item.label}}</i-option>--> | |
| 373 | + <!--</i-select>--> | |
| 374 | + <!--<br>--> | |
| 375 | + <!--<i-select--> | |
| 376 | + <!--v-model="model7"--> | |
| 377 | + <!--style="width:200px"--> | |
| 378 | + <!-->--> | |
| 379 | + <!--<option-group label="Hot Cities">--> | |
| 380 | + <!--<i-option--> | |
| 381 | + <!--v-for="item in cityList1"--> | |
| 382 | + <!--:value="item.value"--> | |
| 383 | + <!--:key="item.value"--> | |
| 384 | + <!-->{{item.label}}</i-option>--> | |
| 385 | + <!--</option-group>--> | |
| 386 | + <!--<option-group label="Other Cities">--> | |
| 387 | + <!--<i-option--> | |
| 388 | + <!--v-for="item in cityList2"--> | |
| 389 | + <!--:value="item.value"--> | |
| 390 | + <!--:key="item.value"--> | |
| 391 | + <!-->{{item.label}}</i-option>--> | |
| 392 | + <!--</option-group>--> | |
| 393 | + <!--</i-select>--> | |
| 394 | + <!--<br>--> | |
| 395 | + <!--<i-select--> | |
| 396 | + <!--v-model="model9"--> | |
| 397 | + <!--style="width:200px"--> | |
| 398 | + <!-->--> | |
| 399 | + <!--<i-option value="New York" label="New York">--> | |
| 400 | + <!--<span>New York</span>--> | |
| 401 | + <!--<span style="float:right;color:#ccc">America</span>--> | |
| 402 | + <!--</i-option>--> | |
| 403 | + <!--<i-option value="London" label="London">--> | |
| 404 | + <!--<span>London</span>--> | |
| 405 | + <!--<span style="float:right;color:#ccc">U.K.</span>--> | |
| 406 | + <!--</i-option>--> | |
| 407 | + <!--<i-option value="Sydney" label="Sydney">--> | |
| 408 | + <!--<span>Sydney</span>--> | |
| 409 | + <!--<span style="float:right;color:#ccc">Australian</span>--> | |
| 410 | + <!--</i-option>--> | |
| 411 | + <!--</i-select>--> | |
| 412 | + <!--<br>--> | |
| 413 | + <!--<div>here</div>--> | |
| 414 | + <!--<i-select--> | |
| 415 | + <!--v-model="model10"--> | |
| 416 | + <!--multiple--> | |
| 417 | + <!--style="width:260px"--> | |
| 418 | + <!-->--> | |
| 419 | + <!--<i-option--> | |
| 420 | + <!--v-for="item in cityList"--> | |
| 421 | + <!--:value="item.value"--> | |
| 422 | + <!--:key="item.value"--> | |
| 423 | + <!-->{{item.label}}</i-option>--> | |
| 424 | + <!--</i-select>--> | |
| 425 | + <!--<br>--> | |
| 426 | + <!--<row>--> | |
| 427 | + <!--<i-col--> | |
| 428 | + <!--span="12"--> | |
| 429 | + <!--style="padding-right:10px"--> | |
| 430 | + <!-->--> | |
| 431 | + <!--<i-select--> | |
| 432 | + <!--v-model="model11"--> | |
| 433 | + <!--filterable--> | |
| 434 | + <!-->--> | |
| 435 | + <!--<i-option--> | |
| 436 | + <!--v-for="item in cityList"--> | |
| 437 | + <!--:value="item.value"--> | |
| 438 | + <!--:key="item.value"--> | |
| 439 | + <!-->{{item.label}}</i-option>--> | |
| 440 | + <!--</i-select>--> | |
| 441 | + <!--</i-col>--> | |
| 442 | + <!--<i-col span="12">--> | |
| 443 | + <!--<i-select--> | |
| 444 | + <!--v-model="model12"--> | |
| 445 | + <!--filterable--> | |
| 446 | + <!--multiple--> | |
| 447 | + <!-->--> | |
| 448 | + <!--<i-option--> | |
| 449 | + <!--v-for="item in cityList"--> | |
| 450 | + <!--:value="item.value"--> | |
| 451 | + <!--:key="item.value"--> | |
| 452 | + <!-->{{item.label}}</i-option>--> | |
| 453 | + <!--</i-select>--> | |
| 454 | + <!--</i-col>--> | |
| 455 | + <!--</row>--> | |
| 456 | + <!--<br>--> | |
| 457 | + <!--<row>--> | |
| 458 | + <!--<i-col--> | |
| 459 | + <!--span="12"--> | |
| 460 | + <!--style="padding-right:10px"--> | |
| 461 | + <!-->--> | |
| 462 | + <!--<i-select--> | |
| 463 | + <!--v-model="model13"--> | |
| 464 | + <!--filterable--> | |
| 465 | + <!--remote--> | |
| 466 | + <!--clearable--> | |
| 467 | + <!--:remote-method="remoteMethod1"--> | |
| 468 | + <!--:loading="loading1"--> | |
| 469 | + <!-->--> | |
| 470 | + <!--<i-option--> | |
| 471 | + <!--v-for="(option, index) in options1"--> | |
| 472 | + <!--:value="option.value"--> | |
| 473 | + <!--:key="index"--> | |
| 474 | + <!-->{{option.label}}</i-option>--> | |
| 475 | + <!--</i-select>--> | |
| 476 | + <!--</i-col>--> | |
| 477 | + <!--<i-col span="12">--> | |
| 478 | + <!--<i-select--> | |
| 479 | + <!--v-model="model14"--> | |
| 480 | + <!--multiple--> | |
| 481 | + <!--filterable--> | |
| 482 | + <!--remote--> | |
| 483 | + <!--clearable--> | |
| 484 | + <!--:remote-method="remoteMethod2"--> | |
| 485 | + <!--:loading="loading2">--> | |
| 486 | + <!--<i-option--> | |
| 487 | + <!--v-for="(option, index) in options2"--> | |
| 488 | + <!--:value="option.value"--> | |
| 489 | + <!--:key="index"--> | |
| 490 | + <!-->{{option.label}}</i-option>--> | |
| 491 | + <!--</i-select>--> | |
| 492 | + <!--</i-col>--> | |
| 493 | + <!--</row>--> | |
| 494 | + <!--</div>--> | |
| 495 | +<!--</template>--> | |
| 496 | + | |
| 497 | +<!--<script>--> | |
| 498 | + <!--export default {--> | |
| 499 | + <!--data(){--> | |
| 500 | + <!--return {--> | |
| 501 | + <!--cityList: [--> | |
| 502 | + <!--{--> | |
| 503 | + <!--value: 'New York',--> | |
| 504 | + <!--label: 'New York',--> | |
| 505 | + <!--},--> | |
| 506 | + <!--{--> | |
| 507 | + <!--value: 'London',--> | |
| 508 | + <!--label: 'London',--> | |
| 509 | + <!--},--> | |
| 510 | + <!--{--> | |
| 511 | + <!--value: 'Sydney',--> | |
| 512 | + <!--label: 'Sydney',--> | |
| 513 | + <!--},--> | |
| 514 | + <!--{--> | |
| 515 | + <!--value: 'Ottawa',--> | |
| 516 | + <!--label: 'Ottawa',--> | |
| 517 | + <!--},--> | |
| 518 | + <!--{--> | |
| 519 | + <!--value: 'Paris',--> | |
| 520 | + <!--label: 'Paris',--> | |
| 521 | + <!--},--> | |
| 522 | + <!--{--> | |
| 523 | + <!--value: 'Canberra',--> | |
| 524 | + <!--label: 'Canberra',--> | |
| 525 | + <!--},--> | |
| 526 | + <!--],--> | |
| 527 | + <!--cityList1: [--> | |
| 528 | + <!--{--> | |
| 529 | + <!--value: 'New York',--> | |
| 530 | + <!--label: 'New York',--> | |
| 531 | + <!--},--> | |
| 532 | + <!--{--> | |
| 533 | + <!--value: 'London',--> | |
| 534 | + <!--label: 'London',--> | |
| 535 | + <!--},--> | |
| 536 | + <!--{--> | |
| 537 | + <!--value: 'Sydney',--> | |
| 538 | + <!--label: 'Sydney',--> | |
| 539 | + <!--},--> | |
| 540 | + <!--],--> | |
| 541 | + <!--cityList2: [--> | |
| 542 | + <!--{--> | |
| 543 | + <!--value: 'Ottawa',--> | |
| 544 | + <!--label: 'Ottawa',--> | |
| 545 | + <!--},--> | |
| 546 | + <!--{--> | |
| 547 | + <!--value: 'Paris',--> | |
| 548 | + <!--label: 'Paris',--> | |
| 549 | + <!--},--> | |
| 550 | + <!--{--> | |
| 551 | + <!--value: 'Canberra',--> | |
| 552 | + <!--label: 'Canberra',--> | |
| 553 | + <!--},--> | |
| 554 | + <!--],--> | |
| 555 | + <!--model1: '',--> | |
| 556 | + <!--model2: '',--> | |
| 557 | + <!--model3: '',--> | |
| 558 | + <!--model4: '',--> | |
| 559 | + <!--model5: '',--> | |
| 560 | + <!--model6: '',--> | |
| 561 | + <!--model7: '',--> | |
| 562 | + <!--model8: '',--> | |
| 563 | + <!--model9: '',--> | |
| 564 | + <!--model10: [],--> | |
| 565 | + <!--model11: '',--> | |
| 566 | + <!--model12: [],--> | |
| 567 | + <!--model13: '',--> | |
| 568 | + <!--loading1: false,--> | |
| 569 | + <!--options1: [],--> | |
| 570 | + <!--model14: [],--> | |
| 571 | + <!--loading2: false,--> | |
| 572 | + <!--options2: [],--> | |
| 573 | + <!--list: [--> | |
| 574 | + <!--'Alabama',--> | |
| 575 | + <!--'Alaska',--> | |
| 576 | + <!--'Arizona',--> | |
| 577 | + <!--'Arkansas',--> | |
| 578 | + <!--'California',--> | |
| 579 | + <!--'Colorado',--> | |
| 580 | + <!--'Connecticut',--> | |
| 581 | + <!--'Delaware',--> | |
| 582 | + <!--'Florida',--> | |
| 583 | + <!--'Georgia',--> | |
| 584 | + <!--'Hawaii',--> | |
| 585 | + <!--'Idaho',--> | |
| 586 | + <!--'Illinois',--> | |
| 587 | + <!--'Indiana',--> | |
| 588 | + <!--'Iowa',--> | |
| 589 | + <!--'Kansas',--> | |
| 590 | + <!--'Kentucky',--> | |
| 591 | + <!--'Louisiana',--> | |
| 592 | + <!--'Maine',--> | |
| 593 | + <!--'Maryland',--> | |
| 594 | + <!--'Massachusetts',--> | |
| 595 | + <!--'Michigan',--> | |
| 596 | + <!--'Minnesota',--> | |
| 597 | + <!--'Mississippi',--> | |
| 598 | + <!--'Missouri',--> | |
| 599 | + <!--'Montana',--> | |
| 600 | + <!--'Nebraska',--> | |
| 601 | + <!--'Nevada',--> | |
| 602 | + <!--'New hampshire',--> | |
| 603 | + <!--'New jersey',--> | |
| 604 | + <!--'New mexico',--> | |
| 605 | + <!--'New york',--> | |
| 606 | + <!--'North carolina',--> | |
| 607 | + <!--'North dakota',--> | |
| 608 | + <!--'Ohio',--> | |
| 609 | + <!--'Oklahoma',--> | |
| 610 | + <!--'Oregon',--> | |
| 611 | + <!--'Pennsylvania',--> | |
| 612 | + <!--'Rhode island',--> | |
| 613 | + <!--'South carolina',--> | |
| 614 | + <!--'South dakota',--> | |
| 615 | + <!--'Tennessee',--> | |
| 616 | + <!--'Texas',--> | |
| 617 | + <!--'Utah',--> | |
| 618 | + <!--'Vermont',--> | |
| 619 | + <!--'Virginia',--> | |
| 620 | + <!--'Washington',--> | |
| 621 | + <!--'West virginia',--> | |
| 622 | + <!--'Wisconsin',--> | |
| 623 | + <!--'Wyoming',--> | |
| 624 | + <!--],--> | |
| 625 | + <!--};--> | |
| 626 | + <!--},--> | |
| 627 | + | |
| 628 | + <!--methods: {--> | |
| 629 | + <!--remoteMethod1(query){--> | |
| 630 | + <!--if (query !== '') {--> | |
| 631 | + <!--this.loading1 = true;--> | |
| 632 | + | |
| 633 | + <!--setTimeout(() => {--> | |
| 634 | + <!--this.loading1 = false;--> | |
| 635 | + | |
| 636 | + <!--const list = this.list.map(item => ({--> | |
| 637 | + <!--value: item,--> | |
| 638 | + <!--label: item,--> | |
| 639 | + <!--}));--> | |
| 640 | + | |
| 641 | + <!--this.options1 = list--> | |
| 642 | + <!--.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));--> | |
| 643 | + <!--}, 1500);--> | |
| 644 | + <!--} else {--> | |
| 645 | + <!--this.options1 = [];--> | |
| 646 | + <!--}--> | |
| 647 | + <!--},--> | |
| 648 | + <!--remoteMethod2(query){--> | |
| 649 | + <!--if (query !== '') {--> | |
| 650 | + <!--this.loading2 = true;--> | |
| 651 | + | |
| 652 | + <!--setTimeout(() => {--> | |
| 653 | + <!--this.loading2 = false;--> | |
| 654 | + | |
| 655 | + <!--const list = this.list.map(item => ({--> | |
| 656 | + <!--value: item,--> | |
| 657 | + <!--label: item,--> | |
| 658 | + <!--}));--> | |
| 659 | + | |
| 660 | + <!--this.options2 = list--> | |
| 661 | + <!--.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));--> | |
| 662 | + <!--}, 200);--> | |
| 663 | + <!--} else {--> | |
| 664 | + <!--this.options2 = [];--> | |
| 665 | + <!--}--> | |
| 666 | + <!--},--> | |
| 667 | + <!--},--> | |
| 668 | + <!--};--> | |
| 669 | +<!--</script>--> | |
| 670 | + | |
| 671 | + | |
| 296 | 672 | <template> |
| 297 | - <div id="app"> | |
| 298 | - <input><br> | |
| 299 | - <i-select | |
| 300 | - v-model="model1" | |
| 301 | - style="width:200px" | |
| 302 | - > | |
| 303 | - <i-option | |
| 304 | - v-for="item in cityList" | |
| 305 | - :value="item.value" | |
| 306 | - :key="item.value" | |
| 307 | - >{{item.label}}</i-option> | |
| 308 | - </i-select> | |
| 309 | - <br> | |
| 310 | - <i-select | |
| 311 | - v-model="model2" | |
| 312 | - size="small" | |
| 313 | - style="width:100px" | |
| 314 | - > | |
| 315 | - <i-option | |
| 316 | - v-for="item in cityList" | |
| 317 | - :value="item.value" | |
| 318 | - :key="item.value" | |
| 319 | - >{{item.label}}</i-option> | |
| 320 | - </i-select> | |
| 321 | - <i-select | |
| 322 | - v-model="model3" | |
| 323 | - style="width:100px" | |
| 324 | - > | |
| 325 | - <i-option | |
| 326 | - v-for="item in cityList" | |
| 327 | - :value="item.value" | |
| 328 | - :key="item.value" | |
| 329 | - >{{item.label}}</i-option> | |
| 330 | - </i-select> | |
| 331 | - <i-select | |
| 332 | - v-model="model4" | |
| 333 | - size="large" | |
| 334 | - style="width:100px" | |
| 335 | - > | |
| 336 | - <i-option | |
| 337 | - v-for="item in cityList" | |
| 338 | - :value="item.value" | |
| 339 | - :key="item.value" | |
| 340 | - >{{item.label}}</i-option> | |
| 341 | - </i-select> | |
| 342 | - <br> | |
| 343 | - <i-select | |
| 344 | - v-model="model5" | |
| 345 | - disabled | |
| 346 | - style="width:200px" | |
| 347 | - > | |
| 348 | - <i-option | |
| 349 | - v-for="item in cityList" | |
| 350 | - :value="item.value" | |
| 351 | - :key="item.value" | |
| 352 | - >{{item.label}}</i-option> | |
| 353 | - </i-select> | |
| 354 | - <i-select | |
| 355 | - v-model="model6" | |
| 356 | - style="width:200px" | |
| 357 | - > | |
| 358 | - <i-option value="beijing">New York</i-option> | |
| 359 | - <i-option value="shanghai" disabled>London</i-option> | |
| 360 | - <i-option value="shenzhen">Sydney</i-option> | |
| 361 | - </i-select> | |
| 362 | - <br> | |
| 363 | - <i-select | |
| 364 | - v-model="model8" | |
| 365 | - clearable | |
| 366 | - style="width:200px" | |
| 367 | - > | |
| 368 | - <i-option | |
| 369 | - v-for="item in cityList" | |
| 370 | - :value="item.value" | |
| 371 | - :key="item.value" | |
| 372 | - >{{item.label}}</i-option> | |
| 373 | - </i-select> | |
| 374 | - <br> | |
| 375 | - <i-select | |
| 376 | - v-model="model7" | |
| 377 | - style="width:200px" | |
| 378 | - > | |
| 379 | - <option-group label="Hot Cities"> | |
| 380 | - <i-option | |
| 381 | - v-for="item in cityList1" | |
| 382 | - :value="item.value" | |
| 383 | - :key="item.value" | |
| 384 | - >{{item.label}}</i-option> | |
| 385 | - </option-group> | |
| 386 | - <option-group label="Other Cities"> | |
| 387 | - <i-option | |
| 388 | - v-for="item in cityList2" | |
| 389 | - :value="item.value" | |
| 390 | - :key="item.value" | |
| 391 | - >{{item.label}}</i-option> | |
| 392 | - </option-group> | |
| 393 | - </i-select> | |
| 394 | - <br> | |
| 395 | - <i-select | |
| 396 | - v-model="model9" | |
| 397 | - style="width:200px" | |
| 398 | - > | |
| 399 | - <i-option value="New York" label="New York"> | |
| 400 | - <span>New York</span> | |
| 401 | - <span style="float:right;color:#ccc">America</span> | |
| 402 | - </i-option> | |
| 403 | - <i-option value="London" label="London"> | |
| 404 | - <span>London</span> | |
| 405 | - <span style="float:right;color:#ccc">U.K.</span> | |
| 406 | - </i-option> | |
| 407 | - <i-option value="Sydney" label="Sydney"> | |
| 408 | - <span>Sydney</span> | |
| 409 | - <span style="float:right;color:#ccc">Australian</span> | |
| 410 | - </i-option> | |
| 411 | - </i-select> | |
| 412 | - <br> | |
| 413 | - <div>here</div> | |
| 414 | - <i-select | |
| 415 | - v-model="model10" | |
| 416 | - multiple | |
| 417 | - style="width:260px" | |
| 418 | - > | |
| 419 | - <i-option | |
| 420 | - v-for="item in cityList" | |
| 421 | - :value="item.value" | |
| 422 | - :key="item.value" | |
| 423 | - >{{item.label}}</i-option> | |
| 424 | - </i-select> | |
| 425 | - <br> | |
| 426 | - <row> | |
| 427 | - <i-col | |
| 428 | - span="12" | |
| 429 | - style="padding-right:10px" | |
| 430 | - > | |
| 431 | - <i-select | |
| 432 | - v-model="model11" | |
| 433 | - filterable | |
| 434 | - > | |
| 435 | - <i-option | |
| 436 | - v-for="item in cityList" | |
| 437 | - :value="item.value" | |
| 438 | - :key="item.value" | |
| 439 | - >{{item.label}}</i-option> | |
| 440 | - </i-select> | |
| 441 | - </i-col> | |
| 442 | - <i-col span="12"> | |
| 443 | - <i-select | |
| 444 | - v-model="model12" | |
| 445 | - filterable | |
| 446 | - multiple | |
| 447 | - > | |
| 448 | - <i-option | |
| 449 | - v-for="item in cityList" | |
| 450 | - :value="item.value" | |
| 451 | - :key="item.value" | |
| 452 | - >{{item.label}}</i-option> | |
| 453 | - </i-select> | |
| 454 | - </i-col> | |
| 455 | - </row> | |
| 456 | - <br> | |
| 457 | - <row> | |
| 458 | - <i-col | |
| 459 | - span="12" | |
| 460 | - style="padding-right:10px" | |
| 461 | - > | |
| 462 | - <i-select | |
| 463 | - v-model="model13" | |
| 464 | - filterable | |
| 465 | - remote | |
| 466 | - clearable | |
| 467 | - :remote-method="remoteMethod1" | |
| 468 | - :loading="loading1" | |
| 469 | - > | |
| 470 | - <i-option | |
| 471 | - v-for="(option, index) in options1" | |
| 472 | - :value="option.value" | |
| 473 | - :key="index" | |
| 474 | - >{{option.label}}</i-option> | |
| 475 | - </i-select> | |
| 476 | - </i-col> | |
| 477 | - <i-col span="12"> | |
| 478 | - <i-select | |
| 479 | - v-model="model14" | |
| 480 | - multiple | |
| 481 | - filterable | |
| 482 | - remote | |
| 483 | - clearable | |
| 484 | - :remote-method="remoteMethod2" | |
| 485 | - :loading="loading2"> | |
| 486 | - <i-option | |
| 487 | - v-for="(option, index) in options2" | |
| 488 | - :value="option.value" | |
| 489 | - :key="index" | |
| 490 | - >{{option.label}}</i-option> | |
| 491 | - </i-select> | |
| 492 | - </i-col> | |
| 493 | - </row> | |
| 673 | + <div> | |
| 674 | + <Select v-model="model1" size="small" style="width:200px;"> | |
| 675 | + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | |
| 676 | + </Select> | |
| 677 | + <Select v-model="model10" size="small" multiple style="width:260px"> | |
| 678 | + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | |
| 679 | + </Select> | |
| 680 | + | |
| 681 | + <br><br> | |
| 682 | + | |
| 683 | + <Select v-model="model1" size="large" style="width:200px"> | |
| 684 | + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | |
| 685 | + </Select> | |
| 686 | + <Select v-model="model10" size="large" multiple style="width:260px"> | |
| 687 | + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | |
| 688 | + </Select> | |
| 689 | + | |
| 690 | + <br><br> | |
| 691 | + | |
| 692 | + <Select v-model="model1" style="width:200px"> | |
| 693 | + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | |
| 694 | + </Select> | |
| 695 | + <Select v-model="model11" multiple style="width:260px"> | |
| 696 | + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | |
| 697 | + </Select> | |
| 698 | + <Select v-model="model10" multiple style="width:260px"> | |
| 699 | + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | |
| 700 | + </Select> | |
| 494 | 701 | </div> |
| 495 | 702 | </template> |
| 496 | - | |
| 497 | 703 | <script> |
| 498 | 704 | export default { |
| 499 | - data(){ | |
| 705 | + data () { | |
| 500 | 706 | return { |
| 501 | 707 | cityList: [ |
| 502 | 708 | { |
| 503 | 709 | value: 'New York', |
| 504 | - label: 'New York', | |
| 710 | + label: 'New York' | |
| 505 | 711 | }, |
| 506 | 712 | { |
| 507 | - value: 'London', | |
| 508 | - label: 'London', | |
| 713 | + value: '中国', | |
| 714 | + label: '中国' | |
| 509 | 715 | }, |
| 510 | 716 | { |
| 511 | 717 | value: 'Sydney', |
| 512 | - label: 'Sydney', | |
| 718 | + label: 'Sydney' | |
| 513 | 719 | }, |
| 514 | 720 | { |
| 515 | 721 | value: 'Ottawa', |
| 516 | - label: 'Ottawa', | |
| 722 | + label: 'Ottawa' | |
| 517 | 723 | }, |
| 518 | 724 | { |
| 519 | 725 | value: 'Paris', |
| 520 | - label: 'Paris', | |
| 726 | + label: 'Paris' | |
| 521 | 727 | }, |
| 522 | 728 | { |
| 523 | 729 | value: 'Canberra', |
| 524 | - label: 'Canberra', | |
| 525 | - }, | |
| 526 | - ], | |
| 527 | - cityList1: [ | |
| 528 | - { | |
| 529 | - value: 'New York', | |
| 530 | - label: 'New York', | |
| 531 | - }, | |
| 532 | - { | |
| 533 | - value: 'London', | |
| 534 | - label: 'London', | |
| 535 | - }, | |
| 536 | - { | |
| 537 | - value: 'Sydney', | |
| 538 | - label: 'Sydney', | |
| 539 | - }, | |
| 540 | - ], | |
| 541 | - cityList2: [ | |
| 542 | - { | |
| 543 | - value: 'Ottawa', | |
| 544 | - label: 'Ottawa', | |
| 545 | - }, | |
| 546 | - { | |
| 547 | - value: 'Paris', | |
| 548 | - label: 'Paris', | |
| 549 | - }, | |
| 550 | - { | |
| 551 | - value: 'Canberra', | |
| 552 | - label: 'Canberra', | |
| 553 | - }, | |
| 730 | + label: 'Canberra' | |
| 731 | + } | |
| 554 | 732 | ], |
| 555 | 733 | model1: '', |
| 556 | - model2: '', | |
| 557 | - model3: '', | |
| 558 | - model4: '', | |
| 559 | - model5: '', | |
| 560 | - model6: '', | |
| 561 | - model7: '', | |
| 562 | - model8: '', | |
| 563 | - model9: '', | |
| 564 | 734 | model10: [], |
| 565 | - model11: '', | |
| 566 | - model12: [], | |
| 567 | - model13: '', | |
| 568 | - loading1: false, | |
| 569 | - options1: [], | |
| 570 | - model14: [], | |
| 571 | - loading2: false, | |
| 572 | - options2: [], | |
| 573 | - list: [ | |
| 574 | - 'Alabama', | |
| 575 | - 'Alaska', | |
| 576 | - 'Arizona', | |
| 577 | - 'Arkansas', | |
| 578 | - 'California', | |
| 579 | - 'Colorado', | |
| 580 | - 'Connecticut', | |
| 581 | - 'Delaware', | |
| 582 | - 'Florida', | |
| 583 | - 'Georgia', | |
| 584 | - 'Hawaii', | |
| 585 | - 'Idaho', | |
| 586 | - 'Illinois', | |
| 587 | - 'Indiana', | |
| 588 | - 'Iowa', | |
| 589 | - 'Kansas', | |
| 590 | - 'Kentucky', | |
| 591 | - 'Louisiana', | |
| 592 | - 'Maine', | |
| 593 | - 'Maryland', | |
| 594 | - 'Massachusetts', | |
| 595 | - 'Michigan', | |
| 596 | - 'Minnesota', | |
| 597 | - 'Mississippi', | |
| 598 | - 'Missouri', | |
| 599 | - 'Montana', | |
| 600 | - 'Nebraska', | |
| 601 | - 'Nevada', | |
| 602 | - 'New hampshire', | |
| 603 | - 'New jersey', | |
| 604 | - 'New mexico', | |
| 605 | - 'New york', | |
| 606 | - 'North carolina', | |
| 607 | - 'North dakota', | |
| 608 | - 'Ohio', | |
| 609 | - 'Oklahoma', | |
| 610 | - 'Oregon', | |
| 611 | - 'Pennsylvania', | |
| 612 | - 'Rhode island', | |
| 613 | - 'South carolina', | |
| 614 | - 'South dakota', | |
| 615 | - 'Tennessee', | |
| 616 | - 'Texas', | |
| 617 | - 'Utah', | |
| 618 | - 'Vermont', | |
| 619 | - 'Virginia', | |
| 620 | - 'Washington', | |
| 621 | - 'West virginia', | |
| 622 | - 'Wisconsin', | |
| 623 | - 'Wyoming', | |
| 624 | - ], | |
| 625 | - }; | |
| 626 | - }, | |
| 627 | - | |
| 628 | - methods: { | |
| 629 | - remoteMethod1(query){ | |
| 630 | - if (query !== '') { | |
| 631 | - this.loading1 = true; | |
| 632 | - | |
| 633 | - setTimeout(() => { | |
| 634 | - this.loading1 = false; | |
| 635 | - | |
| 636 | - const list = this.list.map(item => ({ | |
| 637 | - value: item, | |
| 638 | - label: item, | |
| 639 | - })); | |
| 640 | - | |
| 641 | - this.options1 = list | |
| 642 | - .filter(item => item.label.toLowerCase().includes(query.toLowerCase())); | |
| 643 | - }, 1500); | |
| 644 | - } else { | |
| 645 | - this.options1 = []; | |
| 646 | - } | |
| 647 | - }, | |
| 648 | - remoteMethod2(query){ | |
| 649 | - if (query !== '') { | |
| 650 | - this.loading2 = true; | |
| 651 | - | |
| 652 | - setTimeout(() => { | |
| 653 | - this.loading2 = false; | |
| 654 | - | |
| 655 | - const list = this.list.map(item => ({ | |
| 656 | - value: item, | |
| 657 | - label: item, | |
| 658 | - })); | |
| 659 | - | |
| 660 | - this.options2 = list | |
| 661 | - .filter(item => item.label.toLowerCase().includes(query.toLowerCase())); | |
| 662 | - }, 200); | |
| 663 | - } else { | |
| 664 | - this.options2 = []; | |
| 665 | - } | |
| 666 | - }, | |
| 667 | - }, | |
| 668 | - }; | |
| 735 | + model11: [] | |
| 736 | + } | |
| 737 | + } | |
| 738 | + } | |
| 669 | 739 | </script> | ... | ... |
src/styles/components/select.less
| ... | ... | @@ -96,6 +96,24 @@ |
| 96 | 96 | } |
| 97 | 97 | } |
| 98 | 98 | |
| 99 | + &-multiple &-selection{ | |
| 100 | + padding: 0 24px 0 4px; | |
| 101 | + //min-height: @input-height-base; | |
| 102 | + | |
| 103 | + .@{select-prefix-cls}-placeholder{ | |
| 104 | + display: block; | |
| 105 | + height: @input-height-base - 2px; | |
| 106 | + line-height: @input-height-base - 2px; | |
| 107 | + color: @input-placeholder-color; | |
| 108 | + font-size: @font-size-small; | |
| 109 | + overflow: hidden; | |
| 110 | + text-overflow: ellipsis; | |
| 111 | + white-space: nowrap; | |
| 112 | + padding-left: 4px; | |
| 113 | + padding-right: 22px; | |
| 114 | + } | |
| 115 | + } | |
| 116 | + | |
| 99 | 117 | &-large&-single &-selection{ |
| 100 | 118 | height: @input-height-large; |
| 101 | 119 | |
| ... | ... | @@ -106,6 +124,16 @@ |
| 106 | 124 | } |
| 107 | 125 | } |
| 108 | 126 | |
| 127 | + &-large&-multiple &-selection{ | |
| 128 | + min-height: @input-height-large; | |
| 129 | + | |
| 130 | + .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{ | |
| 131 | + min-height: @input-height-large - 2px; | |
| 132 | + line-height: @input-height-large - 2px; | |
| 133 | + font-size: @font-size-base; | |
| 134 | + } | |
| 135 | + } | |
| 136 | + | |
| 109 | 137 | &-small&-single &-selection{ |
| 110 | 138 | height: @input-height-small; |
| 111 | 139 | border-radius: @btn-border-radius-small; |
| ... | ... | @@ -116,21 +144,14 @@ |
| 116 | 144 | } |
| 117 | 145 | } |
| 118 | 146 | |
| 119 | - &-multiple &-selection{ | |
| 120 | - padding: 0 24px 0 4px; | |
| 121 | - min-height: @input-height-base; | |
| 147 | + &-small&-multiple &-selection{ | |
| 148 | + min-height: @input-height-small; | |
| 149 | + border-radius: @btn-border-radius-small; | |
| 122 | 150 | |
| 123 | - .@{select-prefix-cls}-placeholder{ | |
| 124 | - display: block; | |
| 125 | - height: @input-height-base - 2px; | |
| 126 | - line-height: @input-height-base - 2px; | |
| 127 | - color: @input-placeholder-color; | |
| 128 | - font-size: @font-size-small; | |
| 129 | - overflow: hidden; | |
| 130 | - text-overflow: ellipsis; | |
| 131 | - white-space: nowrap; | |
| 132 | - padding-left: 4px; | |
| 133 | - padding-right: 22px; | |
| 151 | + .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{ | |
| 152 | + height: auto; | |
| 153 | + min-height: @input-height-small - 2px; | |
| 154 | + line-height: @input-height-small - 2px; | |
| 134 | 155 | } |
| 135 | 156 | } |
| 136 | 157 | |
| ... | ... | @@ -189,6 +210,22 @@ |
| 189 | 210 | } |
| 190 | 211 | |
| 191 | 212 | &-multiple .@{css-prefix}tag{ |
| 213 | + height: 24px; | |
| 214 | + line-height: 22px; | |
| 215 | + margin: 3px 4px 3px 0; | |
| 216 | + } | |
| 217 | + | |
| 218 | + &-large&-multiple .@{css-prefix}tag{ | |
| 219 | + height: 28px; | |
| 220 | + line-height: 26px; | |
| 221 | + font-size: @font-size-base; | |
| 222 | + } | |
| 223 | + | |
| 224 | + &-small&-multiple .@{css-prefix}tag{ | |
| 225 | + height: 17px; | |
| 226 | + line-height: 15px; | |
| 227 | + font-size: @font-size-small; | |
| 228 | + padding: 0 6px; | |
| 192 | 229 | margin: 3px 4px 2px 0; |
| 193 | 230 | } |
| 194 | 231 | ... | ... |