mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-30 12:52:43 +08:00
95 lines
2.0 KiB
Vue
95 lines
2.0 KiB
Vue
<template>
|
|
<div class="n-doc-section">
|
|
<div class="n-doc-section__header">
|
|
Search
|
|
</div>
|
|
<div
|
|
class="n-doc-section__view"
|
|
style="flex-wrap: nowrap;"
|
|
>
|
|
<!--EXAMPLE_START-->
|
|
<n-select
|
|
v-model="selectedValue"
|
|
filterable
|
|
placeholder="Please Select Type"
|
|
:options="options"
|
|
style="flex-grow: 1; margin-right: 12px; width: 300px;"
|
|
/>
|
|
<n-select
|
|
v-model="selectedValues"
|
|
multiple
|
|
filterable
|
|
placeholder="Please Select Type"
|
|
:options="options"
|
|
style="flex-grow: 1; margin-right: 12px; width: 300px;"
|
|
/>
|
|
<!--EXAMPLE_END-->
|
|
</div>
|
|
<pre class="n-doc-section__inspect">v-model(single): {{ JSON.stringify(selectedValue) }}, v-model(multiple): {{ JSON.stringify(selectedValues) }}</pre>
|
|
<n-doc-source-block>
|
|
<!--SOURCE-->
|
|
</n-doc-source-block>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
selectedValue: null,
|
|
selectedValues: null,
|
|
options: [
|
|
{
|
|
label: 'Drive My Car',
|
|
value: 'song1'
|
|
},
|
|
{
|
|
label: 'Norwegian Wood',
|
|
value: 'song2'
|
|
},
|
|
{
|
|
label: 'You Won\'t See',
|
|
value: 'song3'
|
|
},
|
|
{
|
|
label: 'Nowhere Man',
|
|
value: 'song4'
|
|
},
|
|
{
|
|
label: 'Think For Yourself',
|
|
value: 'song5'
|
|
},
|
|
{
|
|
label: 'The Word',
|
|
value: 'song6'
|
|
},
|
|
{
|
|
label: 'Michelle',
|
|
value: 'song7'
|
|
},
|
|
{
|
|
label: 'What goes on',
|
|
value: 'song8'
|
|
},
|
|
{
|
|
label: 'Girl',
|
|
value: 'song9'
|
|
},
|
|
{
|
|
label: 'I\'m looking through you',
|
|
value: 'song10'
|
|
},
|
|
{
|
|
label: 'In My Life',
|
|
value: 'song11'
|
|
},
|
|
{
|
|
label: 'Wait',
|
|
value: 'song12'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|