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,377 +293,447 @@ | ||
| 293 | <!--}--> | 293 | <!--}--> |
| 294 | <!--</script>--> | 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 | <template> | 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 | </div> | 701 | </div> |
| 495 | </template> | 702 | </template> |
| 496 | - | ||
| 497 | <script> | 703 | <script> |
| 498 | export default { | 704 | export default { |
| 499 | - data(){ | 705 | + data () { |
| 500 | return { | 706 | return { |
| 501 | cityList: [ | 707 | cityList: [ |
| 502 | { | 708 | { |
| 503 | value: 'New York', | 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 | value: 'Sydney', | 717 | value: 'Sydney', |
| 512 | - label: 'Sydney', | 718 | + label: 'Sydney' |
| 513 | }, | 719 | }, |
| 514 | { | 720 | { |
| 515 | value: 'Ottawa', | 721 | value: 'Ottawa', |
| 516 | - label: 'Ottawa', | 722 | + label: 'Ottawa' |
| 517 | }, | 723 | }, |
| 518 | { | 724 | { |
| 519 | value: 'Paris', | 725 | value: 'Paris', |
| 520 | - label: 'Paris', | 726 | + label: 'Paris' |
| 521 | }, | 727 | }, |
| 522 | { | 728 | { |
| 523 | value: 'Canberra', | 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 | model1: '', | 733 | model1: '', |
| 556 | - model2: '', | ||
| 557 | - model3: '', | ||
| 558 | - model4: '', | ||
| 559 | - model5: '', | ||
| 560 | - model6: '', | ||
| 561 | - model7: '', | ||
| 562 | - model8: '', | ||
| 563 | - model9: '', | ||
| 564 | model10: [], | 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 | </script> | 739 | </script> |
src/styles/components/select.less
| @@ -96,6 +96,24 @@ | @@ -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 | &-large&-single &-selection{ | 117 | &-large&-single &-selection{ |
| 100 | height: @input-height-large; | 118 | height: @input-height-large; |
| 101 | 119 | ||
| @@ -106,6 +124,16 @@ | @@ -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 | &-small&-single &-selection{ | 137 | &-small&-single &-selection{ |
| 110 | height: @input-height-small; | 138 | height: @input-height-small; |
| 111 | border-radius: @btn-border-radius-small; | 139 | border-radius: @btn-border-radius-small; |
| @@ -116,21 +144,14 @@ | @@ -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,6 +210,22 @@ | ||
| 189 | } | 210 | } |
| 190 | 211 | ||
| 191 | &-multiple .@{css-prefix}tag{ | 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 | margin: 3px 4px 2px 0; | 229 | margin: 3px 4px 2px 0; |
| 193 | } | 230 | } |
| 194 | 231 |