2019-09-25 12:19:57 +08:00
|
|
|
# Events
|
|
|
|
```html
|
|
|
|
<n-select
|
|
|
|
v-model="selectedValue"
|
|
|
|
placeholder="Please Select Type"
|
|
|
|
:options="options"
|
|
|
|
@change="handleChange"
|
|
|
|
/>
|
|
|
|
<n-select
|
|
|
|
v-model="selectedValue"
|
|
|
|
placeholder="Please Select Type"
|
|
|
|
:options="options"
|
|
|
|
@change="handleChange"
|
|
|
|
emit-option
|
|
|
|
/>
|
|
|
|
<n-select
|
|
|
|
v-model="selectedArray"
|
|
|
|
multiple
|
|
|
|
placeholder="Please Select Type"
|
|
|
|
:options="options"
|
|
|
|
@change="handleChange"
|
|
|
|
/>
|
|
|
|
<n-select
|
|
|
|
v-model="selectedArray"
|
|
|
|
multiple
|
|
|
|
placeholder="Please Select Type"
|
|
|
|
:options="options"
|
2019-11-14 02:18:36 +08:00
|
|
|
/>
|
|
|
|
<n-select
|
|
|
|
v-model="selectedValue"
|
|
|
|
size="large"
|
|
|
|
:options="options"
|
2019-09-25 12:19:57 +08:00
|
|
|
emit-option
|
|
|
|
@change="handleChange"
|
2019-11-14 02:18:36 +08:00
|
|
|
>
|
|
|
|
<n-select-option
|
|
|
|
v-for="option in options"
|
|
|
|
:key="options.value"
|
|
|
|
:label="option.label"
|
|
|
|
:value="option.value"
|
|
|
|
:disabled="option.disabled"
|
|
|
|
/>
|
|
|
|
</n-select>
|
|
|
|
<n-select
|
|
|
|
v-model="selectedArray"
|
|
|
|
size="large"
|
|
|
|
multiple
|
|
|
|
:options="options"
|
|
|
|
emit-option
|
|
|
|
@change="handleChange"
|
|
|
|
>
|
|
|
|
<n-select-option
|
|
|
|
v-for="option in options"
|
|
|
|
:key="options.value"
|
|
|
|
:label="option.label"
|
|
|
|
:value="option.value"
|
|
|
|
:disabled="option.disabled"
|
|
|
|
/>
|
|
|
|
</n-select>
|
2019-09-25 12:19:57 +08:00
|
|
|
```
|
|
|
|
```js
|
2019-07-17 18:27:13 +08:00
|
|
|
export default {
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
selectedValue: 'song1',
|
|
|
|
selectedArray: ['song1'],
|
2019-08-22 16:21:39 +08:00
|
|
|
options: [
|
2019-07-17 18:27:13 +08:00
|
|
|
{
|
|
|
|
label: 'Drive My Car',
|
|
|
|
value: 'song1'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Norwegian Wood',
|
|
|
|
value: 'song2'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'You Won\'t See',
|
|
|
|
value: 'song3'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Nowhere Man',
|
|
|
|
value: 'song4'
|
|
|
|
},
|
|
|
|
{
|
2019-09-25 12:19:57 +08:00
|
|
|
label: 'Think For Yourself',
|
2019-07-17 18:27:13 +08:00
|
|
|
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'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
2019-08-19 15:23:24 +08:00
|
|
|
handleChange (item) {
|
2019-09-25 12:19:57 +08:00
|
|
|
this.$NMessage.info('value: ' + JSON.stringify(item))
|
2019-07-17 18:27:13 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2019-09-25 12:19:57 +08:00
|
|
|
```
|
|
|
|
```css
|
|
|
|
.n-select {
|
|
|
|
width: 180px;
|
|
|
|
margin: 0 12px 8px 0;
|
|
|
|
}
|
|
|
|
```
|