github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/vueComponent/ant-design

pull/165/head
wangxueliang 2018-04-11 15:17:47 +08:00
parent e9899ac09f 0a111957ca
commit dc5482f9c9
29 changed files with 435 additions and 380 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/button/demo/multiple.md
View File

@ -13,7 +13,7 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
<div> <div>
<a-button type="primary">Primary</a-button> <a-button type="primary">Primary</a-button>
<a-button>secondary</a-button> <a-button>secondary</a-button>
<a-dropdown overlay={menu}> <a-dropdown>
<a-menu slot="overlay" @click="handleMenuClick"> <a-menu slot="overlay" @click="handleMenuClick">
<a-menu-item key="1">1st item</a-menu-item> <a-menu-item key="1">1st item</a-menu-item>
<a-menu-item key="2">2nd item</a-menu-item> <a-menu-item key="2">2nd item</a-menu-item>

15
components/radio/demo/basic.md Normal file
View File

@ -0,0 +1,15 @@
<cn>
#### 基本
最简单的用法。
</cn>
<us>
#### Basic
The simplest use.
</us>
```html
<template>
<a-radio>Radio</a-radio>
</template>
```

13
components/radio/demo/basic.vue
View File

@ -1,13 +0,0 @@
<template>
<div>
<Radio>Radio</Radio>
</div>
</template>
<script>
import { Radio } from 'antd'
export default {
components: {
Radio,
},
}
</script>

21
components/radio/demo/disabled.vue → components/radio/demo/disabled.md
View File

@ -1,8 +1,19 @@
<cn>
#### 不可用
Radio 不可用。
</cn>
<us>
#### disabled
Radio unavailable.
</us>
```html
<template> <template>
<div> <div>
<Radio :defaultChecked="false" :disabled="disabled">Disabled</Radio> <a-radio :defaultChecked="false" :disabled="disabled">Disabled</a-radio>
<br /> <br />
<Radio defaultChecked :disabled="disabled">Disabled</Radio> <a-radio defaultChecked :disabled="disabled">Disabled</a-radio>
<div :style="{ marginTop: 20 }"> <div :style="{ marginTop: 20 }">
<a-button type="primary" @click="toggleDisabled"> <a-button type="primary" @click="toggleDisabled">
Toggle disabled Toggle disabled
@ -11,7 +22,6 @@
</div> </div>
</template> </template>
<script> <script>
import { Radio, Button } from 'antd'
export default { export default {
data () { data () {
return { return {
@ -23,9 +33,6 @@ export default {
this.disabled = !this.disabled this.disabled = !this.disabled
}, },
}, },
components: {
Radio,
},
} }
</script> </script>
```

71
components/radio/demo/index.vue
View File

@ -1,23 +1,3 @@
<template>
<div>
<h1>Basic</h1>
<Basic />
<h1>Disabled</h1>
<Disabled />
<h1>RadioButton</h1>
<RadioButton />
<h1>RadioGroupMore</h1>
<RadioGroupMore />
<h1>RadioGroupOptions</h1>
<RadioGroupOptions />
<h1>RadioGroupWithName</h1>
<RadioGroupWithName />
<h1>RadioGroup</h1>
<RadioGroup />
<h1>Size</h1>
<Size />
</div>
</template>
<script> <script>
import Basic from './basic' import Basic from './basic'
import Disabled from './disabled' import Disabled from './disabled'
@ -27,20 +7,53 @@ import RadioGroupOptions from './radioGroup-options'
import RadioGroupWithName from './radioGroup-with-name' import RadioGroupWithName from './radioGroup-with-name'
import RadioGroup from './radioGroup' import RadioGroup from './radioGroup'
import Size from './size' import Size from './size'
import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'
const md = {
cn: `# 单选框
单选框。
## 何时使用
- 用于在多个备选项中选中单个状态。
- 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
## 代码演示`,
us: `# Radio
Radio.
## When To Use
- Used to select a single state in multiple options.
- The difference between Select is that Radio is visible to user and can facilitate the comparison of choice. So, when you want to use Radio, option should not be too much.
## Examples
`,
}
export default { export default {
category: 'Components', category: 'Components',
subtitle: '单选框', subtitle: '单选框',
type: 'Data Entry', type: 'Data Entry',
title: 'Radio', title: 'Radio',
components: { render () {
Basic, return (
Disabled, <div>
RadioButton, <md cn={md.cn} us={md.us}/>
RadioGroupMore, <Basic />
RadioGroupOptions, <Disabled />
RadioGroupWithName, <RadioButton />
RadioGroup, <RadioGroupMore />
Size, <RadioGroupOptions />
<RadioGroupWithName />
<RadioGroup />
<Size />
<api>
<template slot='cn'>
<CN/>
</template>
<US/>
</api>
</div>
)
}, },
} }
</script> </script>

49
components/radio/demo/radioButton.md Normal file
View File

@ -0,0 +1,49 @@
<cn>
#### 按钮样式
按钮样式的单选组合。
</cn>
<us>
#### radio style
The combination of radio button style.
</us>
```html
<template>
<div>
<div>
<a-radio-group @change="onChange" defaultValue="a">
<a-radio-button value="a">Hangzhou</a-radio-button>
<a-radio-button value="b">Shanghai</a-radio-button>
<a-radio-button value="c">Beijing</a-radio-button>
<a-radio-button value="d">Chengdu</a-radio-button>
</a-radio-group>
</div>
<div :style="{ marginTop: '16px' }">
<a-radio-group @change="onChange" defaultValue="a">
<a-radio-button value="a">Hangzhou</a-radio-button>
<a-radio-button value="b" disabled>Shanghai</a-radio-button>
<a-radio-button value="c">Beijing</a-radio-button>
<a-radio-button value="d">Chengdu</a-radio-button>
</a-radio-group>
</div>
<div :style="{ marginTop: '16px' }">
<a-radio-group disabled @change="onChange" defaultValue="a">
<a-radio-button value="a">Hangzhou</a-radio-button>
<a-radio-button value="b">Shanghai</a-radio-button>
<a-radio-button value="c">Beijing</a-radio-button>
<a-radio-button value="d">Chengdu</a-radio-button>
</a-radio-group>
</div>
</div>
</template>
<script>
export default {
methods: {
onChange (e) {
console.log(`checked = ${e.target.value}`)
},
},
}
</script>
```

42
components/radio/demo/radioButton.vue
View File

@ -1,42 +0,0 @@
<template>
<div>
<div>
<RadioGroup @change="onChange" defaultValue="a">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
<div :style="{ marginTop: '16px' }">
<RadioGroup @change="onChange" defaultValue="a">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b" disabled>Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
<div :style="{ marginTop: '16px' }">
<RadioGroup disabled @change="onChange" defaultValue="a">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
</div>
</template>
<script>
import { Radio } from 'antd'
export default {
methods: {
onChange (e) {
console.log(`checked = ${e.target.value}`)
},
},
components: {
RadioButton: Radio.Button,
RadioGroup: Radio.Group,
},
}
</script>

42
components/radio/demo/radioGroup-more.md Normal file
View File

@ -0,0 +1,42 @@
<cn>
#### RadioGroup 垂直
垂直的 RadioGroup，配合更多输入框选项。
</cn>
<us>
#### Vertical RadioGroup
Vertical RadioGroup, with more radios.
</us>
```html
<template>
<a-radio-group @change="onChange" v-model="value">
<a-radio :style="radioStyle" :value="1">Option A</a-radio>
<a-radio :style="radioStyle" :value="2">Option B</a-radio>
<a-radio :style="radioStyle" :value="3">Option C</a-radio>
<a-radio :style="radioStyle" :value="4">
More...
<a-input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
</a-radio>
</a-radio-group>
</template>
<script>
export default {
data () {
return {
value: 1,
radioStyle: {
display: 'block',
height: '30px',
lineHeight: '30px',
},
}
},
methods: {
onChange (e) {
console.log('radio checked', e.target.value)
},
},
}
</script>
```

35
components/radio/demo/radioGroup-more.vue
View File

@ -1,35 +0,0 @@
<template>
<RadioGroup @change="onChange" v-model="value">
<Radio :style="radioStyle" :value="1">Option A</Radio>
<Radio :style="radioStyle" :value="2">Option B</Radio>
<Radio :style="radioStyle" :value="3">Option C</Radio>
<Radio :style="radioStyle" :value="4">
More...
<Input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
</Radio>
</RadioGroup>
</template>
<script>
import { Radio } from 'antd'
export default {
data () {
return {
value: 1,
radioStyle: {
display: 'block',
height: '30px',
lineHeight: '30px',
},
}
},
methods: {
onChange (e) {
console.log('radio checked', e.target.value)
},
},
components: {
Radio,
RadioGroup: Radio.Group,
},
}
</script>

23
components/radio/demo/radioGroup-options.vue → components/radio/demo/radioGroup-options.md
View File

@ -1,14 +1,24 @@
<cn>
#### RadioGroup 组合 - 配置方式
通过配置 `options` 参数来渲染单选框。
</cn>
<us>
#### RadioGroup group - optional
Render radios by configuring `options`.
</us>
```html
<template> <template>
<div> <div>
<RadioGroup :options="plainOptions" @change="onChange1" :defaultValue="value1" /> <a-radio-group :options="plainOptions" @change="onChange1" :defaultValue="value1" />
<br /> <br />
<RadioGroup :options="options" @change="onChange2" v-model="value2" /> <a-radio-group :options="options" @change="onChange2" v-model="value2" />
<br /> <br />
<RadioGroup :options="optionsWithDisabled" disabled @change="onChange3" v-model="value3" /> <a-radio-group :options="optionsWithDisabled" disabled @change="onChange3" v-model="value3" />
</div> </div>
</template> </template>
<script> <script>
import { Radio } from 'antd'
const plainOptions = ['Apple', 'Pear', 'Orange'] const plainOptions = ['Apple', 'Pear', 'Orange']
const options = [ const options = [
{ label: 'Apple', value: 'Apple' }, { label: 'Apple', value: 'Apple' },
@ -42,9 +52,6 @@ export default {
console.log('radio3 checked', e.target.value) console.log('radio3 checked', e.target.value)
}, },
}, },
components: {
Radio,
RadioGroup: Radio.Group,
},
} }
</script> </script>
```

20
components/radio/demo/radioGroup-with-name.md Normal file
View File

@ -0,0 +1,20 @@
<cn>
#### 单选组合 - 配合 name 使用
可以为 RadioGroup 配置 `name` 参数，为组合内的 input 元素赋予相同的 `name` 属性，使浏览器把 RadioGroup 下的 Radio 真正看作是一组（例如可以通过方向键始终**在同一组内**更改选项）。
</cn>
<us>
#### RadioGroup with name
Passing the `name` property to all `input[type="radio"]` that are in the same RadioGroup. It is usually used to let the browser see your RadioGroup as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same RadioGroup.
</us>
```html
<template>
<a-radio-group name="radioGroup" :defaultValue="1">
<a-radio :value="1">A</a-radio>
<a-radio :value="2">B</a-radio>
<a-radio :value="3">C</a-radio>
<a-radio :value="4">D</a-radio>
</a-radio-group>
</template>
```

17
components/radio/demo/radioGroup-with-name.vue
View File

@ -1,17 +0,0 @@
<template>
<RadioGroup name="radioGroup" :defaultValue="1">
<Radio :value="1">A</Radio>
<Radio :value="2">B</Radio>
<Radio :value="3">C</Radio>
<Radio :value="4">D</Radio>
</RadioGroup>
</template>
<script>
import { Radio } from 'antd'
export default {
components: {
Radio,
RadioGroup: Radio.Group,
},
}
</script>

34
components/radio/demo/radioGroup.md Normal file
View File

@ -0,0 +1,34 @@
<cn>
#### 单选组合
一组互斥的 Radio 配合使用。
</cn>
<us>
#### Radio Group
A group of radio components.
</us>
```html
<template>
<a-radio-group @change="onChange" v-model="value">
<a-radio :value="1">A</a-radio>
<a-radio :value="2">B</a-radio>
<a-radio :value="3">C</a-radio>
<a-radio :value="4">D</a-radio>
</a-radio-group>
</template>
<script>
export default {
data () {
return {
value: 1,
}
},
methods: {
onChange (e) {
console.log('radio checked', e.target.value)
},
},
}
</script>
```

27
components/radio/demo/radioGroup.vue
View File

@ -1,27 +0,0 @@
<template>
<RadioGroup @change="onChange" v-model="value">
<Radio :value="1">A</Radio>
<Radio :value="2">B</Radio>
<Radio :value="3">C</Radio>
<Radio :value="4">D</Radio>
</RadioGroup>
</template>
<script>
import { Radio } from 'antd'
export default {
data () {
return {
value: 1,
}
},
methods: {
onChange (e) {
console.log('radio checked', e.target.value)
},
},
components: {
Radio,
RadioGroup: Radio.Group,
},
}
</script>

40
components/radio/demo/size.md Normal file
View File

@ -0,0 +1,40 @@
<cn>
#### 单选组合
一组互斥的 Radio 配合使用。
</cn>
<us>
#### Radio Group
A group of radio components.
</us>
```html
<template>
<div>
<div>
<a-radio-group defaultValue="a" size="large">
<a-radio-button value="a">Hangzhou</a-radio-button>
<a-radio-button value="b">Shanghai</a-radio-button>
<a-radio-button value="c">Beijing</a-radio-button>
<a-radio-button value="d">Chengdu</a-radio-button>
</a-radio-group>
</div>
<div :style="{ marginTop: '16px' }">
<a-radio-group defaultValue="a">
<a-radio-button value="a">Hangzhou</a-radio-button>
<a-radio-button value="b">Shanghai</a-radio-button>
<a-radio-button value="c">Beijing</a-radio-button>
<a-radio-button value="d">Chengdu</a-radio-button>
</a-radio-group>
</div>
<div :style="{ marginTop: '16px' }">
<a-radio-group defaultValue="a" size="small">
<a-radio-button value="a">Hangzhou</a-radio-button>
<a-radio-button value="b">Shanghai</a-radio-button>
<a-radio-button value="c">Beijing</a-radio-button>
<a-radio-button value="d">Chengdu</a-radio-button>
</a-radio-group>
</div>
</div>
</template>
```

37
components/radio/demo/size.vue
View File

@ -1,37 +0,0 @@
<template>
<div>
<div>
<RadioGroup defaultValue="a" size="large">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
<div :style="{ marginTop: '16px' }">
<RadioGroup defaultValue="a">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
<div :style="{ marginTop: '16px' }">
<RadioGroup defaultValue="a" size="small">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
</div>
</template>
<script>
import { Radio } from 'antd'
export default {
components: {
RadioButton: Radio.Button,
RadioGroup: Radio.Group,
},
}
</script>

41
components/radio/index.en-US.md Normal file
View File

@ -0,0 +1,41 @@
## API
### Radio
| Property | Description | Type | optional | Default |
| -------- | ----------- | ---- | -------- | ------- |
| autoFocus | get focus when component mounted | boolean | false | |
| checked | Specifies whether the radio is selected. | boolean | | false |
| defaultChecked | Specifies the initial state: whether or not the radio is selected. | boolean | | false |
| disabled | Disable radio | boolean | | false |
| value | According to value for comparison, to determine whether the selected | any | | none |
### RadioGroup
radio group，wrap a group of `Radio`。
| Property | Description | Type | optional | Default |
| -------- | ----------- | ---- | -------- | ------- |
| defaultValue | Default selected value | any | none | none |
| disabled | Disable all radio buttons | boolean | | false |
| name | The `name` property of all `input[type="radio"]` children | string | | none |
| options | set children optional | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | 无 | 无 |
| size | Size, only on radio style | string | `large` `default` `small` | `default` |
| value(v-model) | Used for setting the currently selected value. | any | none | none |
### RadioGroup Events
| Events Name | Description | Arguments |
| --- | --- | --- |
| change | The callback function that is triggered when the state changes. | Function(e:Event) |
## Methods
### Radio
| Name | Description |
| ---- | ----------- |
| blur() | remove focus |
| focus() | get focus |

39
components/radio/index.zh-CN.md Normal file
View File

@ -0,0 +1,39 @@
## API
### Radio
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoFocus | 自动获取焦点 | boolean | false |
| checked | 指定当前是否选中 | boolean | false |
| defaultChecked | 初始是否选中 | boolean | false |
| value | 根据 value 进行比较，判断是否选中 | any | 无 |
### RadioGroup
单选框组合，用于包裹一组 `Radio`。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultValue | 默认选中的值 | any | 无 |
| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string | 无 |
| options | 以配置形式设置子元素 | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | 无 |
| size | 大小，只对按钮样式生效 | `large` \| `default` \| `small` | `default` |
| value(v-model) | 用于设置当前选中的值 | any | 无 |
### RadioGroup 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 选项变化时的回调函数 | Function(e:Event) |
## 方法
### Radio
| 名称 | 描述 |
| --- | --- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |

1
components/select/index.jsx
View File

@ -27,6 +27,7 @@ const AbstractSelectProps = {
]), ]),
autoFocus: PropTypes.bool, autoFocus: PropTypes.bool,
backfill: PropTypes.bool, backfill: PropTypes.bool,
showArrow: PropTypes.bool,
} }
const Value = PropTypes.shape({ const Value = PropTypes.shape({
key: String, key: String,

2
docs/vue/i18n.en-US.md
View File

@ -6,7 +6,7 @@ If you want to use other languages, you can follow the instructions below.
## LocaleProvider ## LocaleProvider
vue-antd-ui provides a React Component [LocaleProvider](/ant-design/components/locale-provider) for configuring vue-antd-ui locale text globally. vue-antd-ui provides a Vue Component [LocaleProvider](/ant-design/components/locale-provider) for configuring vue-antd-ui locale text globally.
````html ````html
<template> <template>

4
docs/vue/introduce.en-US.md
View File

@ -26,12 +26,12 @@ Following the Ant Design specification, we developed a Vue UI library `antd` tha
## Features ## Features
- An enterprise-class UI design language for web applications. - An enterprise-class UI design language for web applications.
- A set of high-quality React components out of the box. - A set of high-quality Vue components out of the box.
- Shared [Ant Design of React](https://ant.design/docs/spec/introduce) design resources. - Shared [Ant Design of React](https://ant.design/docs/spec/introduce) design resources.
## Environment Support ## Environment Support
* Modern browsers and Internet Explorer 9+ (with [polyfills](https://vuecomponent.github.io/ant-design/docs/react/getting-started-cn#兼容性)) * Modern browsers and Internet Explorer 9+ (with [polyfills](https://vuecomponent.github.io/ant-design/docs/vue/getting-started-cn/#兼容性))
* Server-side Rendering * Server-side Rendering
## Version ## Version

4
docs/vue/introduce.zh-CN.md
View File

@ -30,7 +30,7 @@
## 支持环境 ## 支持环境
* 现代浏览器和 IE9 及以上（需要 [polyfills](https://vuecomponent.github.io/ant-design/docs/react/getting-started-cn#兼容性)）。 * 现代浏览器和 IE9 及以上（需要 [polyfills](https://vuecomponent.github.io/ant-design/docs/vue/getting-started-cn/#兼容性)）。
* 支持服务端渲染。 * 支持服务端渲染。
## 版本 ## 版本
@ -118,7 +118,7 @@ import 'vue-antd-ui/dist/antd.css'; // or 'vue-antd-ui/dist/antd.less'
- [首页](https://vuecomponent.github.io/ant-design/) - [首页](https://vuecomponent.github.io/ant-design/)
- [Ant Design React](https://ant.design/) - [Ant Design React](https://ant.design/)
- [组件库](https://vuecomponent.github.io/ant-design/docs/react/introduce-cn) - [组件库](https://vuecomponent.github.io/ant-design/docs/vue/introduce-cn)
- [更新日志](/ant-design/changelog-cn) - [更新日志](/ant-design/changelog-cn)
- [CodeSandbox 模板](https://codesandbox.io/s/2wpk21kzvr) for bug reports - [CodeSandbox 模板](https://codesandbox.io/s/2wpk21kzvr) for bug reports
- [定制主题](/ant-design/docs/vue/customize-theme-cn) - [定制主题](/ant-design/docs/vue/customize-theme-cn)

5
docs/vue/use-with-vue-cli.en-US.md
View File

@ -3,7 +3,6 @@
[vue-cli](https://github.com/vuejs/vue-cli) is one of the best Vue application development tools. We are going to use `antd` within it and modify the webpack config for some customized needs. [vue-cli](https://github.com/vuejs/vue-cli) is one of the best Vue application development tools. We are going to use `antd` within it and modify the webpack config for some customized needs.
---
## Install and Initialization ## Install and Initialization
@ -100,7 +99,7 @@ Now we need to customize the default webpack config.
### Use babel-plugin-import ### Use babel-plugin-import
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/ant-design/docs/vue/getting-started#Import-on-Demand)). [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/ant-design/docs/vue/getting-started/#Import-on-Demand)).
```bash ```bash
$ yarn add babel-plugin-import --dev $ yarn add babel-plugin-import --dev
@ -150,7 +149,7 @@ Remove the `import 'vue-antd-ui/dist/antd.css';` statement added before because
}) })
``` ```
Then reboot with `npm run dev` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/ant-design/docs/vue/getting-started#Import-on-Demand). Then reboot with `npm run dev` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/ant-design/docs/vue/getting-started/#Import-on-Demand).
### Customize Theme ### Customize Theme

4
docs/vue/use-with-vue-cli.zh-CN.md
View File

@ -96,7 +96,7 @@ new Vue({
### 使用 babel-plugin-import ### 使用 babel-plugin-import
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/ant-design/docs/vue/getting-started#按需加载)）。 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/ant-design/docs/vue/getting-started-cn/#按需加载)）。
```bash ```bash
$ yarn add babel-plugin-import --dev $ yarn add babel-plugin-import --dev
@ -147,7 +147,7 @@ $ yarn add babel-plugin-import --dev
}) })
``` ```
最后重启 `npm run dev` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/ant-design/docs/vue/getting-started-cn#按需加载)。 最后重启 `npm run dev` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/ant-design/docs/vue/getting-started-cn/#按需加载)。
### 自定义主题 ### 自定义主题

140
site/components/demo.vue
View File

@ -1,140 +0,0 @@
<script>
import * as AllDemo from '../demo'
import Header from './header'
import zhCN from 'antd/locale-provider/zh_CN'
import enUS from 'antd/locale-provider/default'
import _ from 'lodash'
import { isZhCN } from '../util'
import { Provider, create } from '../../components/_util/store'
export default {
data () {
this.store = create({
currentSubMenu: [],
})
this.subscribe()
return {
currentSubMenu: [],
}
},
beforeDestroy () {
if (this.unsubscribe) {
this.unsubscribe()
}
},
watch: {
'$route.params.name': function () {
this.store.setState({ currentSubMenu: [] })
},
},
methods: {
subscribe () {
const { store } = this
this.unsubscribe = store.subscribe(() => {
this.currentSubMenu = this.store.getState().currentSubMenu
})
},
getSubMenu (isCN) {
const currentSubMenu = this.currentSubMenu
const lis = []
currentSubMenu.forEach(({ cnTitle, usTitle, id }) => {
const title = isCN ? cnTitle : usTitle
const className = window.location.hash === `#${id}` ? 'current' : ''
lis.push(<li title={title}><a href={`#${id}`} class={className}>{title}</a></li>)
})
return (
<a-affix>
<ul id='demo-toc' class='toc'>
{lis}
<li title='API' key='API'>
<a
href='#api'
class={{
current: window.location.hash === '#api',
}}
>API</a>
</li>
</ul>
</a-affix>
)
},
},
render () {
const { name } = this.$route.params
const isCN = isZhCN(name)
const lang = isCN ? 'cn' : 'us'
// name = name.replace(/-cn\/?$/, '')
const titleMap = {}
const menuConfig = {
General: [],
Layout: [],
Navigation: [],
'Data Entry': [],
'Data Display': [],
Feedback: [],
Other: [],
}
for (const [title, d] of Object.entries(AllDemo)) {
const type = d.type || 'Other'
const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
titleMap[key] = title
menuConfig[type] = menuConfig[type] || []
menuConfig[type].push(d)
}
const Demo = AllDemo[titleMap[name.replace(/-cn\/?$/, '')]]
const MenuGroup = []
for (const [type, menus] of Object.entries(menuConfig)) {
const MenuItems = []
_.sortBy(menus, ['title']).forEach(({ title, subtitle }) => {
const linkValue = lang === 'cn'
? [<span>{title}</span>, <span class='chinese'>{subtitle}</span>]
: [<span>{title}</span>]
let key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
if (lang === 'cn') {
key = `${key}-cn`
}
MenuItems.push(<a-menu-item key={key}>
<router-link to={{ path: `/ant-design/components/${key}/` }}>{linkValue}</router-link>
</a-menu-item>)
})
MenuGroup.push(<a-menu-item-group title={type}>{MenuItems}</a-menu-item-group>)
}
let locale = zhCN
if (lang !== 'cn') {
locale = enUS
}
return (
<div class='page-wrapper'>
<Header num={Object.keys(AllDemo).length}/>
<a-locale-provider locale={locale}>
<div class='main-wrapper'>
<a-row>
<a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
<a-menu
class='aside-container menu-site'
selectedKeys={[name]}
defaultOpenKeys={['Components']}
inlineIndent={40}
mode='inline'>
<a-sub-menu title='Components' key='Components'>
{MenuGroup}
</a-sub-menu>
</a-menu>
</a-col>
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
<div class='content main-container'>
<div class='toc-affix' style='width: 110px;'>
{this.getSubMenu(isCN)}
</div>
{Demo ? <Provider store={this.store}><Demo key={lang}/></Provider> : '正在紧急开发中...'}
</div>
</a-col>
</a-row>
</div>
</a-locale-provider>
</div>
)
},
}
</script>

31
site/components/header.vue
View File

@ -1,12 +1,15 @@
<script> <script>
import { isZhCN } from '../util' import { isZhCN } from '../util'
import _ from 'lodash'
export default { export default {
props: { props: {
num: Number, num: Number,
name: String, name: String,
searchData: Array,
}, },
data () { data () {
return { return {
value: null,
} }
}, },
methods: { methods: {
@ -18,10 +21,14 @@ export default {
path: path.replace(name, newName), path: path.replace(name, newName),
}) })
}, },
onSelect (val) {
this.$router.push(val)
this.value = val
},
}, },
render () { render () {
const name = this.name const name = this.name
const searchData = _.sortBy(this.searchData, ['title'])
const isCN = isZhCN(name) const isCN = isZhCN(name)
return ( return (
<header id='header'> <header id='header'>
@ -33,8 +40,26 @@ export default {
</router-link> </router-link>
</a-col> </a-col>
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}> <a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
<div id='search-box'> <div id='search-box' style='display: block'>
进度：{this.num} / 52 <a-icon type='search' />
<a-select
ref='selectBox'
placeholder={isCN ? '搜索组件...' : 'input search text'}
style='width: 200px'
defaultActiveFirstOption={false}
showArrow={false}
showSearch
onSelect={this.onSelect}
optionFilterProp='children'
key={this.value}
>
{
searchData.map(({ title, subtitle, url }) =>
<a-select-option key={url}>
{title} {isCN && subtitle}
</a-select-option>)
}
</a-select>
</div> </div>
<a-button ghost size='small' onClick={this.handleClick} class='header-lang-button' key='lang-button'> <a-button ghost size='small' onClick={this.handleClick} class='header-lang-button' key='lang-button'>
{isCN ? 'English' : '中文'} {isCN ? 'English' : '中文'}

44
site/components/layout.vue
View File

@ -25,12 +25,31 @@ export default {
this.unsubscribe() this.unsubscribe()
} }
}, },
mounted () {
this.addSubMenu()
},
watch: { watch: {
'$route': function () { '$route.path': function () {
this.store.setState({ currentSubMenu: [] }) this.store.setState({ currentSubMenu: [] })
this.addSubMenu()
}, },
}, },
methods: { methods: {
addSubMenu () {
if (this.$route.path.indexOf('/docs/vue/') !== -1) {
this.$nextTick(() => {
const menus = []
this.$refs.doc.querySelectorAll(['h2', 'h3']).forEach(dom => {
const id = dom.id
if (id) {
const title = dom.textContent.split('#')[0].trim()
menus.push({ cnTitle: title, usTitle: title, id })
}
})
this.currentSubMenu = menus
})
}
},
subscribe () { subscribe () {
const { store } = this const { store } = this
this.unsubscribe = store.subscribe(() => { this.unsubscribe = store.subscribe(() => {
@ -42,21 +61,22 @@ export default {
const lis = [] const lis = []
currentSubMenu.forEach(({ cnTitle, usTitle, id }) => { currentSubMenu.forEach(({ cnTitle, usTitle, id }) => {
const title = isCN ? cnTitle : usTitle const title = isCN ? cnTitle : usTitle
const className = window.location.hash === `#${id}` ? 'current' : '' const className = decodeURIComponent(window.location.hash) === `#${id}` ? 'current' : ''
lis.push(<li title={title}><a href={`#${id}`} class={className}>{title}</a></li>) lis.push(<li title={title}><a href={`#${id}`} class={className}>{title}</a></li>)
}) })
const showApi = this.$route.path.indexOf('/components/') !== -1
return ( return (
<a-affix> <a-affix>
<ul id='demo-toc' class='toc'> <ul id='demo-toc' class='toc'>
{lis} {lis}
<li title='API' key='API'> {showApi ? <li title='API' key='API'>
<a <a
href='#api' href='#API'
class={{ class={{
current: window.location.hash === '#api', current: window.location.hash === '#API',
}} }}
>API</a> >API</a>
</li> </li> : ''}
</ul> </ul>
</a-affix> </a-affix>
) )
@ -93,6 +113,7 @@ export default {
Feedback: [], Feedback: [],
Other: [], Other: [],
} }
const searchData = []
for (const [title, d] of Object.entries(AllDemo)) { for (const [title, d] of Object.entries(AllDemo)) {
const type = d.type || 'Other' const type = d.type || 'Other'
const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}` const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
@ -112,6 +133,11 @@ export default {
if (isCN) { if (isCN) {
key = `${key}-cn` key = `${key}-cn`
} }
searchData.push({
title,
subtitle,
url: `/ant-design/components/${key}/`,
})
MenuItems.push(<a-menu-item key={key}> MenuItems.push(<a-menu-item key={key}>
<router-link to={`/ant-design/components/${key}/`}>{linkValue}</router-link> <router-link to={`/ant-design/components/${key}/`}>{linkValue}</router-link>
</a-menu-item>) </a-menu-item>)
@ -124,7 +150,7 @@ export default {
} }
return ( return (
<div class='page-wrapper'> <div class='page-wrapper'>
<Header num={Object.keys(AllDemo).length} name={name}/> <Header num={Object.keys(AllDemo).length} searchData={searchData} name={name}/>
<a-locale-provider locale={locale}> <a-locale-provider locale={locale}>
<div class='main-wrapper'> <div class='main-wrapper'>
<a-row> <a-row>
@ -144,12 +170,12 @@ export default {
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}> <a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
<div class='content main-container'> <div class='content main-container'>
<div class='toc-affix' style='width: 110px;'> <div class='toc-affix' style='width: 110px;'>
{Demo ? this.getSubMenu(isCN) : ''} {this.getSubMenu(isCN)}
</div> </div>
{Demo ? <Provider store={this.store}> {Demo ? <Provider store={this.store}>
<Demo key={isCN ? 'cn' : 'en'}/> <Demo key={isCN ? 'cn' : 'en'}/>
</Provider> : ''} </Provider> : ''}
<div class='markdown api-container'> <div class='markdown api-container' ref='doc'>
<router-view></router-view> <router-view></router-view>
</div> </div>
</div> </div>

10
site/index.less
View File

@ -61,4 +61,12 @@
right: 15px; right: 15px;
top: 10px; top: 10px;
} }
#search-box {
.ant-select-focused,
.ant-select-selection,
.ant-select-selection:focus,
.ant-select-selection:active {
border: none;
box-shadow: none;
}
}

2
webpack.base.config.js
View File

@ -47,7 +47,7 @@ const md = require('markdown-it')('default', {
highlight: renderHighlight, highlight: renderHighlight,
}).use(require('markdown-it-anchor'), { }).use(require('markdown-it-anchor'), {
level: 2, level: 2,
// slugify: string => string, slugify: string => string.trim().split(' ').join('-'),
permalink: true, permalink: true,
// renderPermalink: (slug, opts, state, permalink) => {}, // renderPermalink: (slug, opts, state, permalink) => {},
permalinkClass: 'anchor', permalinkClass: 'anchor',