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(select): zh-cn

Browse Source
This commit is contained in:
07akioni 2020-02-04 20:32:03 +08:00
parent 5fe2ce3b57
commit 40504aac05
21 changed files with 1202 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
demo/demo.vue
View File

@ -80,10 +80,10 @@ export default {
name: 'Getting Started',
path: `/${this.lang}/${this.theme}` + '/start'
},
{
name: 'Develop Guidelines',
path: `/${this.lang}/${this.theme}` + '/dev-guildlines'
},
// {
// name: 'Develop Guidelines',
// path: `/${this.lang}/${this.theme}` + '/dev-guildlines'
// },
{
name: 'Create Themed Component',
path: `/${this.lang}/${this.theme}` + '/n-theme'

2
demo/documentation/components/customInput/zhCN/index.md
View File

@ -0,0 +1,2 @@
# 自定义输入 Custom Input
还没写呢。wanli 你早点把这个整理了吧 = =。

4
demo/documentation/components/select/enUS/clearable.md
View File

@ -3,20 +3,17 @@ Remember you can only clear the select which has value. (Select it firstly)
```html
<n-select
v-model="selectedValue"
placeholder="Please Select Type"
:options="options"
clearable
/>
<n-select
v-model="selectedArray"
multiple
placeholder="Please Select Type"
:options="options"
clearable
/>
<n-select
v-model="selectedValue"
placeholder="Please Select Type"
:options="options"
filterable
clearable
@ -24,7 +21,6 @@ Remember you can only clear the select which has value. (Select it firstly)
<n-select
v-model="selectedArray"
multiple
placeholder="Please Select Type"
:options="options"
filterable
clearable

2
demo/documentation/components/select/enUS/index.md
View File

@ -54,7 +54,7 @@ action
## Slots
|Name|Description|
|-|-|
|empty||
|action||
## Event
|Name|Parameter|Description|

1
demo/documentation/components/select/enUS/scrollEvent.md
View File

@ -3,7 +3,6 @@ My colleague said he want use scroll status to async load options.
```html
<n-select
v-model="value"
placeholder="Please Select Type"
:options="options"
@scroll="handleScroll"
/>

47
demo/documentation/components/select/zhCN/action.md Normal file
View File

@ -0,0 +1,47 @@
# 操作插槽
有人要在选择菜单里用这个插槽吗？
```html
<n-select
v-model="value"
:options="options"
>
<template v-slot:action>
如果你点开了这个例子，你可能需要它
</template>
</n-select>
```
```js
export default {
data () {
return {
value: null,
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
}
]
}
}
}
```
```css
.n-select {
width: 180px;
margin: 0 12px 8px 0;
}
```

3
demo/documentation/components/select/zhCN/basic.md
View File

@ -1,4 +1,5 @@
# Basic
# 基础用法
选择器的基本用法。
```html
<n-select
v-model="value"

94
demo/documentation/components/select/zhCN/clearable.md Normal file
View File

@ -0,0 +1,94 @@
# 可清空
注意只有选了值才能清空值。
```html
<n-select
v-model="selectedValue"
:options="options"
clearable
/>
<n-select
v-model="selectedArray"
multiple
:options="options"
clearable
/>
<n-select
v-model="selectedValue"
:options="options"
filterable
clearable
/>
<n-select
v-model="selectedArray"
multiple
:options="options"
filterable
clearable
/>
```
```js
export default {
data () {
return {
selectedValue: null,
selectedArray: 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'
}
]
}
}
}
```
```css
.n-select {
width: 180px;
margin: 0 12px 8px 0;
}
```

172
demo/documentation/components/select/zhCN/customOption.md Normal file
View File

@ -0,0 +1,172 @@
# 自定义选项渲染
经过了很久的思考，我决定放弃支持 Slot API。当然，还是提供自定义渲染选项的方式。
```html
<n-select
v-model="value"
:options="options"
/>
```
```js
import mdMusicalNote from 'naive-ui/lib/icons/md-musical-note'
function render (h, option, selected) {
return [
h('n-config-consumer', {
props: {
transparent: true
},
scopedSlots: {
default ({ styleScheme }) {
return h('n-icon', {
style: {
fill: selected ? styleScheme.primaryColor : styleScheme.tertiaryTextColor,
verticalAlign: 'middle',
marginRight: '4px',
}
}, [h(mdMusicalNote)])
}
}
}),
option.label
]
}
export default {
data () {
return {
value: null,
options: [
{
type: 'group',
name: 'Rubber Soul',
render: (h, data) => h('span', [ data.name, '(Cool!)']),
children: [
{
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'
}
].map(v => {
v.render = render
return v
})
},
{
type: 'group',
name: 'Let It Be',
render: (h, data) => h('span', [ data.name, '(Cool!)']),
children: [
{
label: 'Two Of Us',
value: 'Two Of Us'
},
{
label: 'Dig A Pony',
value: 'Dig A Pony'
},
{
label: 'Across The Universe',
value: 'Across The Universe'
},
{
label: 'I Me Mine',
value: 'I Me Mine'
},
{
label: 'Dig It',
value: 'Dig It'
},
{
label: 'Let It Be',
value: 'Let It Be'
},
{
label: 'Maggie Mae',
value: 'Maggie Mae'
},
{
label: 'I\'ve Got A Feeling',
value: 'I\'ve Got A Feeling'
},
{
label: 'One After 909',
value: 'One After 909'
},
{
label: 'The Long And Winding Road',
value: 'The Long And Winding Road'
},
{
label: 'For You Blue',
value: 'For You Blue'
},
{
label: 'Get Back',
value: 'Get Back'
}
].map(v => {
v.render = render
return v
})
}
]
}
}
}
```
```css
.n-select {
width: 180px;
margin: 0 12px 8px 0;
}
```

88
demo/documentation/components/select/zhCN/events.md Normal file
View File

@ -0,0 +1,88 @@
# Change 事件
为什么 change 事件还是个例子？因为一开始的时候没什么可写的。
```html
<n-select
v-model="selectedValue"
placeholder="Please Select Type"
:options="options"
@change="handleChange"
/>
<n-select
v-model="selectedArray"
multiple
placeholder="Please Select Type"
:options="options"
@change="handleChange"
/>
```
```js
export default {
data () {
return {
selectedValue: 'song1',
selectedArray: ['song1'],
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'
}
]
}
},
methods: {
handleChange (item) {
this.$NMessage.info('value: ' + JSON.stringify(item))
}
}
}
```
```css
.n-select {
width: 180px;
margin: 0 12px 8px 0;
}
```

83
demo/documentation/components/select/zhCN/filterable.md Normal file
View File

@ -0,0 +1,83 @@
# 可过滤
上吧！过滤器。
```html
<n-select
v-model="selectedValue"
filterable
placeholder="Please Select a Song"
:options="options"
/>
<n-select
v-model="selectedValues"
multiple
filterable
placeholder="Please Select Songs"
:options="options"
/>
```
```js
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'
}
]
}
}
}
```
```css
.n-select {
width: 180px;
margin: 0 12px 8px 0;
}
```

141
demo/documentation/components/select/zhCN/group.md Normal file
View File

@ -0,0 +1,141 @@
# 选项组
把选项集合成组。
```html
<n-select
filterable
v-model=value
:options='options'
/>
```
```js
export default {
data () {
return {
value: null,
options: [
{
type: 'group',
name: 'Rubber Soul',
children: [
{
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'
}
]
},
{
type: 'group',
name: 'Let It Be',
children: [
{
label: 'Two Of Us',
value: 'Two Of Us'
},
{
label: 'Dig A Pony',
value: 'Dig A Pony'
},
{
label: 'Across The Universe',
value: 'Across The Universe'
},
{
label: 'I Me Mine',
value: 'I Me Mine'
},
{
label: 'Dig It',
value: 'Dig It'
},
{
label: 'Let It Be',
value: 'Let It Be'
},
{
label: 'Maggie Mae',
value: 'Maggie Mae'
},
{
label: 'I\'ve Got A Feeling',
value: 'I\'ve Got A Feeling'
},
{
label: 'One After 909',
value: 'One After 909'
},
{
label: 'The Long And Winding Road',
value: 'The Long And Winding Road'
},
{
label: 'For You Blue',
value: 'For You Blue'
},
{
label: 'Get Back',
value: 'Get Back'
}
]
}
]
}
}
}
```
```css
.n-select {
width: 180px;
margin: 0 12px 8px 0;
}
```

67
demo/documentation/components/select/zhCN/index.md
View File

@ -1,7 +1,66 @@
# Select
Select
## Demo
# 选择器 Select
选点啥！
## 演示
```demo
basic
size
multiple
events
filterable
remote
remote-multiple
clearable
scroll-event
group
many-options
custom-option
action
```
## API
## V-model
|prop|event|
|-|-|
|value|change|
## Props
|名称|类型|默认值|介绍|
|-|-|-|-|
|loading|`boolean`|`false`||
|clearable|`boolean`|`false`||
|value|`Array \| string \| number`|`false`||
|placeholder||||
|multiple|`boolean`|`false`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|disabled|`boolean`|`false`||
|options|`Array<SelectOption \| SelectOptionGroup>`|`[]`||
|remote|`boolearn`|`false`|是否要异步获取选项|
|filter|`(pattern: string, option: Object) => boolean`|`null`||
## API
### SelectOption Type
|属性|类型|介绍|
|-|-|-|
|label|`string`||
|value|`string \| number`|在选项中应该是唯一的|
|disabled|`boolean`||
|render|`function`||
### SelectOptionGroup Type
|属性|类型|介绍|
|-|-|-|
|type|`'group'`||
|name|`string`||
|children|`Array<SelectOption>`||
## Slots
|名称|介绍|
|-|-|
|action||
## Event
|名称|类型|介绍|
|-|-|-|
|change|`(value: Array \| string \| number \| null)`||
|search|`(value: string)`||
|blur|`()`|选择器 Blur 时发出|
|scroll|`(e: Event)`|选择菜单在滚动|

33
demo/documentation/components/select/zhCN/manyOptions.md Normal file
View File

@ -0,0 +1,33 @@
# 许多选项
1000 倍宇宙的终极答案个数的选项。
```html
<n-select
v-model="value"
:options="options"
/>
<n-select
multiple
v-model="values"
:options="options"
/>
```
```js
export default {
data () {
return {
value: null,
values: null,
options: Array.apply(null, { length: 42000 }).map((_, i) => ({
label: String(i),
value: i
}))
}
}
}
```
```css
.n-select {
width: 180px;
margin: 0 12px 8px 0;
}
```

87
demo/documentation/components/select/zhCN/multiple.md Normal file
View File

@ -0,0 +1,87 @@
# 多选
多选值。
```html
<n-select
v-model="value"
multiple
:options="options"
/>
<n-select
v-model="value"
multiple
disabled
:options="options"
/>
```
```js
export default {
data () {
return {
value: null,
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'
}
]
}
}
}
```
```css
.n-select {
width: 180px;
margin: 0 12px 8px 0;
}
```

96
demo/documentation/components/select/zhCN/remote.md Normal file
View File

@ -0,0 +1,96 @@
# 异步加载（单选）
异步单选的例子。
```html
<n-select
v-model="value"
filterable
placeholder="Search Songs"
:options="options"
:loading="loading"
clearable
remote
@search="handleSearch"
/>
```
```js
const 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'
}
]
export default {
data () {
return {
value: null,
loading: false,
options: [],
noDataContent: 'please search',
handleSearch: (query) => {
if (!query.length) {
this.options = []
this.noDataContent = 'please search'
return
}
this.loading = true
window.setTimeout(() => {
this.options = options.filter(item => ~item.label.indexOf(query))
if (!this.options.length) this.noDataContent = 'no result found'
this.loading = false
}, 1000)
}
}
}
}
```
```css
.n-select {
width: 180px;
margin: 0 12px 8px 0;
}
```

97
demo/documentation/components/select/zhCN/remoteMultiple.md Normal file
View File

@ -0,0 +1,97 @@
# 异步加载（多选）
异步多选的例子。
```html
<n-select
v-model="selectedValues"
multiple
filterable
placeholder="Search Songs"
:options="options"
:loading="loading"
clearable
remote
@search="handleSearch"
/>
```
```js
const 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'
}
]
export default {
data () {
return {
selectedValues: null,
loading: false,
options: [],
noDataContent: 'please search',
handleSearch: (query) => {
if (!query.length) {
this.options = []
this.noDataContent = 'please search'
return
}
this.loading = true
window.setTimeout(() => {
this.options = options.filter(item => ~item.label.indexOf(query))
if (!this.options.length) this.noDataContent = 'no result found'
this.loading = false
}, 1000)
}
}
}
}
```
```css
.n-select {
width: 180px;
margin: 0 12px 8px 0;
}
```

92
demo/documentation/components/select/zhCN/scrollEvent.md Normal file
View File

@ -0,0 +1,92 @@
# 滚动事件
同事说要用这个来触发做异步加载。
```html
<n-select
v-model="value"
:options="options"
@scroll="handleScroll"
/>
<pre>{{
JSON.stringify({
scrollContentHeight,
scrollContainerScrollTop,
scrollContainerHeight
}, 0, 2)
}}</pre>
```
```js
export default {
data () {
return {
value: null,
array: null,
scrollContentHeight: null,
scrollContainerHeight: null,
scrollContainerScrollTop: 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 Yourseld',
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: {
handleScroll (e, scrollContainer, scrollContent) {
this.scrollContentHeight = scrollContent.offsetHeight
this.scrollContainerScrollTop = scrollContainer.scrollTop
this.scrollContainerHeight = scrollContainer.offsetHeight
}
}
}
```
```css
.n-select {
width: 180px;
margin: 0 12px 8px 0;
}
```

93
demo/documentation/components/select/zhCN/size.md Normal file
View File

@ -0,0 +1,93 @@
# 尺寸
选择器有不同的尺寸。
```html
<n-select
v-model="value"
size="small"
:options="options"
/>
<n-select
v-model="value"
size="medium"
:options="options"
/>
<n-select
v-model="value"
size="large"
:options="options"
/>
```
```js
export default {
data () {
return {
value: null,
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'
}
]
}
}
}
```
```css
.n-select {
width: 180px;
margin: 0 12px 8px 0;
}
```

3
demo/documentation/intro/intro/zhCN/index.md
View File

@ -0,0 +1,3 @@
<!--no-demo-->
# Naive UI
Naive UI 是图森未来前端的 Vue 组件库。

8
demo/documentation/intro/start/zhCN/index.md
View File

@ -1,15 +1,15 @@
<!--no-demo-->
# 起步
## Installation
First install it.
## 安装
使用 npm 安装。
```bash
npm install --save-dev naive-ui
```
## Usage
Add the following lines in you entry point js file.
## 使用方式
在你项目的 javascript 入口文件添加下列代码。
```js
import naive from 'naive-ui'
import 'naive-ui/dist/lib/index.css'