| 1 | # Select Search
|
| 2 |
|
| 3 | ### Basic usage
|
| 4 |
|
| 5 | :::kview
|
| 6 |
|
| 7 | ```html
|
| 8 | <template>
|
| 9 | <k-select-search :options="keyOption" v-model="searchObj" />
|
| 10 | <div class="select-text">
|
| 11 | current searchObj: {{searchObj}}
|
| 12 | </div>
|
| 13 | </template>
|
| 14 |
|
| 15 | <script>
|
| 16 |
|
| 17 | export default {
|
| 18 | data() {
|
| 19 | return {
|
| 20 | keyOption: [
|
| 21 | {
|
| 22 | key: "",
|
| 23 | label: "any",
|
| 24 | },
|
| 25 | {
|
| 26 | key: "condition1",
|
| 27 | label: "label-one",
|
| 28 | },
|
| 29 | {
|
| 30 | key: "condition2",
|
| 31 | label: "label-two",
|
| 32 | },
|
| 33 | ],
|
| 34 | searchObj: {
|
| 35 |
|
| 36 | },
|
| 37 | }
|
| 38 | },
|
| 39 | }
|
| 40 | </script>
|
| 41 |
|
| 42 | <style>
|
| 43 | .select-text{
|
| 44 | padding:10px;
|
| 45 | }
|
| 46 | </style>
|
| 47 | ```
|
| 48 |
|
| 49 | :::
|
| 50 |
|
| 51 |
|
| 52 | ## Props
|
| 53 |
|
| 54 | <div class="markdown-table">
|
| 55 |
|
| 56 | | Attribute | Description | Type | Default| Require|
|
| 57 | |-------|---------|------|--------|----------|
|
| 58 | |size|size（normal、small、mini）|string|normal|-
|
| 59 | |value / v-model|binding value|if key is truthy return {key:"input content"} ;if key is falsy return the input content|-|-
|
| 60 | |options|options |Array\<object\>|-|-
|
| 61 | |preWidth|Select bar width |Number （unit: px）|120|-
|
| 62 |
|
| 63 | </div>
|