mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc(popselect): zh-cn

Browse Source
This commit is contained in:
07akioni 2020-02-04 15:10:51 +08:00
parent bc0511001b
commit d29e74c9f1
11 changed files with 416 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
demo/documentation/components/popselect/enUS/basic.md
View File

@ -8,60 +8,75 @@ Basic usage of popselect.
:options="options"
@change="handleChange"
>
<n-tag>{{ value || 'popselect' }}</n-tag>
<n-tag>{{ value || 'Popselect' }}</n-tag>
</n-popselect>
```
```js
export default {
data () {
return {
value: 'Sunday Morning Call1',
value: 'song1',
options: [{
label: 'Go Let It Out1',
value: 'Go Let It Out1'
}, {
label: 'Who Feels Love?1',
value: 'Who Feels Love?1'
}, {
label: 'Sunday Morning Call1',
value: 'Sunday Morning Call1',
disabled: true
}, {
label: 'Roll It Over1',
value: 'Roll It Over1'
},
{
label: 'Go Let It Out2',
value: 'Go Let It Out2'
}, {
label: 'Who Feels Love?2',
value: 'Who Feels Love?2'
}, {
label: 'Sunday Morning Call2',
value: 'Sunday Morning Call2',
disabled: true
}, {
label: 'Roll It Over2',
value: 'Roll It Over2'
}, {
label: 'Go Let It Out3',
value: 'Go Let It Out3'
}, {
label: 'Who Feels Love?3',
value: 'Who Feels Love?3'
}, {
label: 'Sunday Morning Call3',
value: 'Sunday Morning Call3',
disabled: true
}, {
label: 'Roll It Over3',
value: 'Roll It Over3'
}]
label: "Everybody's Got Something to Hide Except Me and My Monkey",
value: 'song0',
disabled: true
},
{
label: 'Drive My Car',
value: 'song1'
},
{
label: 'Norwegian Wood',
value: 'song2'
},
{
label: 'You Won\'t See',
value: 'song3',
disabled: true
},
{
label: 'Nowhere Man',
value: 'song4'
},
{
label: 'Think For Yourself',
value: 'song5'
},
{
label: 'The Word',
value: 'song6'
},
{
label: 'Michelle',
value: 'song7',
disabled: true
},
{
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: {
handleChange (v) {
this.$NMessage.info('value: ' + v)
this.$NMessage.info('Value: ' + v)
}
}
}

75
demo/documentation/components/popselect/enUS/cancelable.md
View File

@ -4,35 +4,78 @@ Make single value popselect cancelable.
<n-popselect
v-model="value"
cancelable
@change="handleChange"
:options="options"
>
<n-tag>{{ value || 'popselect' }}</n-tag>
<n-tag>{{ value || 'Popselect' }}</n-tag>
</n-popselect>
```
```js
export default {
data () {
return {
value: null,
value: 'song1',
options: [{
label: 'Go Let It Out',
value: 'Go Let It Out'
}, {
label: 'Who Feels Love?',
value: 'Who Feels Love?'
}, {
label: 'Sunday Morning Call',
value: 'Sunday Morning Call',
disabled: true
}, {
label: 'Roll It Over',
value: 'Roll It Over'
}]
label: "Everybody's Got Something to Hide Except Me and My Monkey",
value: 'song0',
disabled: true
},
{
label: 'Drive My Car',
value: 'song1'
},
{
label: 'Norwegian Wood',
value: 'song2'
},
{
label: 'You Won\'t See',
value: 'song3',
disabled: true
},
{
label: 'Nowhere Man',
value: 'song4'
},
{
label: 'Think For Yourself',
value: 'song5'
},
{
label: 'The Word',
value: 'song6'
},
{
label: 'Michelle',
value: 'song7',
disabled: true
},
{
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: {
handleChange (v) {
this.$NMessage.info('value: ' + v)
this.$NMessage.info('Value: ' + v)
}
}
}

4
demo/documentation/components/popselect/enUS/customWidth.md
View File

@ -10,7 +10,7 @@ Set width of select menu.
:options="options"
@change="handleChange"
>
<n-tag>{{ (Array.isArray(value) && value.length) ? value : 'popselect' }}</n-tag>
<n-tag>{{ (Array.isArray(value) && value.length) ? value : 'Popselect' }}</n-tag>
</n-popselect>
```
```js
@ -36,7 +36,7 @@ export default {
},
methods: {
handleChange (v) {
this.$NMessage.info('value: ' + v)
this.$NMessage.info('Value: ' + v)
}
}
}

14
demo/documentation/components/popselect/enUS/index.md
View File

@ -10,9 +10,14 @@ custom-width
multiple
```
## V-model
|Prop|Event|
|-|-|
|value|change|
## Props
|name|type|default|description|
|Name|Type|Default|Description|
|-|-|-|-|
|value|`string \| number`|||
|options|`Array`|||
@ -21,4 +26,9 @@ multiple
|cancelable|`boolean`|||
|controller|`Object`|||
|arrow|`boolean`|||
|trigger|`'click' \| 'hover' \| 'manual'`|||
|trigger|`'click' \| 'hover' \| 'manual'`|||
## Events
|Name|Parameters|Description|
|-|-|-|
|change|`string \| number \| Array<string \| number> \| null`||

2
demo/documentation/components/popselect/enUS/multiple.md
View File

@ -9,7 +9,7 @@ Select multiple value in popselect.
:options="options"
@change="handleChange"
>
<n-tag>{{ (Array.isArray(value) && value.length) ? value : 'popselect' }}</n-tag>
<n-tag>{{ (Array.isArray(value) && value.length) ? value : 'Popselect' }}</n-tag>
</n-popselect>
```
```js

81
demo/documentation/components/popselect/zhCN/basic.md Normal file
View File

@ -0,0 +1,81 @@
# 基础用法
```html
<n-popselect
v-model="value"
:options="options"
@change="handleChange"
>
<n-tag>{{ value || '弹出选择' }}</n-tag>
</n-popselect>
```
```js
export default {
data () {
return {
value: 'song1',
options: [{
label: "Everybody's Got Something to Hide Except Me and My Monkey",
value: 'song0',
disabled: true
},
{
label: 'Drive My Car',
value: 'song1'
},
{
label: 'Norwegian Wood',
value: 'song2'
},
{
label: 'You Won\'t See',
value: 'song3',
disabled: true
},
{
label: 'Nowhere Man',
value: 'song4'
},
{
label: 'Think For Yourself',
value: 'song5'
},
{
label: 'The Word',
value: 'song6'
},
{
label: 'Michelle',
value: 'song7',
disabled: true
},
{
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: {
handleChange (v) {
this.$NMessage.info('值：' + v)
}
}
}
```

82
demo/documentation/components/popselect/zhCN/cancelable.md Normal file
View File

@ -0,0 +1,82 @@
# 可取消
单值的弹出选择可以取消选中值。
```html
<n-popselect
v-model="value"
cancelable
@change="handleChange"
:options="options"
>
<n-tag>{{ value || '弹出选择' }}</n-tag>
</n-popselect>
```
```js
export default {
data () {
return {
value: 'song1',
options: [{
label: "Everybody's Got Something to Hide Except Me and My Monkey",
value: 'song0',
disabled: true
},
{
label: 'Drive My Car',
value: 'song1'
},
{
label: 'Norwegian Wood',
value: 'song2'
},
{
label: 'You Won\'t See',
value: 'song3',
disabled: true
},
{
label: 'Nowhere Man',
value: 'song4'
},
{
label: 'Think For Yourself',
value: 'song5'
},
{
label: 'The Word',
value: 'song6'
},
{
label: 'Michelle',
value: 'song7',
disabled: true
},
{
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: {
handleChange (v) {
this.$NMessage.info('值：' + v)
}
}
}
```

43
demo/documentation/components/popselect/zhCN/customWidth.md Normal file
View File

@ -0,0 +1,43 @@
# 自定义宽度
设个宽度吧。
```html
<n-popselect
v-model="value"
:width="240"
multiple
:options="options"
@change="handleChange"
>
<n-tag>{{ (Array.isArray(value) && value.length) ? value : '弹出选择' }}</n-tag>
</n-popselect>
```
```js
export default {
data () {
return {
value: null,
options: [{
label: 'Go Let It Out',
value: 'Go Let It Out'
}, {
label: 'Who Feels Love?',
value: 'Who Feels Love?'
}, {
label: 'Sunday Morning Call',
value: 'Sunday Morning Call',
disabled: true
}, {
label: 'Roll It Over',
value: 'Roll It Over'
}]
}
},
methods: {
handleChange (v) {
this.$NMessage.info('值：' + v)
}
}
}
```

33
demo/documentation/components/popselect/zhCN/index.md
View File

@ -0,0 +1,33 @@
# 弹出选择 Popselect
如果你想选择一些数据，还不想看到那个框子，可以使用 Popselect
## 演示
```demo
basic
cancelable
custom-width
multiple
```
## V-model
|Prop|Event|
|-|-|
|value|change|
## Props
|名称|类型|默认值|介绍|
|-|-|-|-|
|value|`string \| number`|||
|options|`Array`|||
|width|`number`|||
|multiple|`boolean`|||
|cancelable|`boolean`|||
|controller|`Object`|||
|arrow|`boolean`|||
|trigger|`'click' \| 'hover' \| 'manual'`|||
## Events
|名称|参数|介绍|
|-|-|-|
|change|`string \| number \| Array<string \| number> \| null`||

41
demo/documentation/components/popselect/zhCN/multiple.md Normal file
View File

@ -0,0 +1,41 @@
# 多选
在弹出选择选中多个值。
```html
<n-popselect
v-model="value"
multiple
:options="options"
@change="handleChange"
>
<n-tag>{{ (Array.isArray(value) && value.length) ? value : '弹出选择' }}</n-tag>
</n-popselect>
```
```js
export default {
data () {
return {
value: null,
options: [{
label: 'Go Let It Out',
value: 'Go Let It Out'
}, {
label: 'Who Feels Love?',
value: 'Who Feels Love?'
}, {
label: 'Sunday Morning Call',
value: 'Sunday Morning Call',
disabled: true
}, {
label: 'Roll It Over',
value: 'Roll It Over'
}]
}
},
methods: {
handleChange (value) {
this.$NMessage.info(JSON.stringify(value))
}
}
}
```

4
packages/common/Popselect/src/Popselect.vue
View File

@ -14,6 +14,10 @@ export default {
NPopover,
NPopselectPanel
},
model: {
prop: 'value',
event: 'change'
},
props: {
options: {
type: Array,