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

update license and add input doc locale doc

pull/165/head
tangjinzhou 2018-03-20 19:06:04 +08:00
parent bb50ac5736
commit f1587ace7e
33 changed files with 861 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.stylelintrc
View File

@ -1,5 +1,6 @@
{
"extends": "stylelint-config-standard",
"ignoreFiles": "./components/**",
"rules": {
"comment-empty-line-before": null,
"declaration-empty-line-before": null,

28
LICENSE
View File

@ -1,7 +1,7 @@
MIT License
Copyright (c) 2017-present tangjinzhou
Copyright (c) 2017-present vue-antd-ui
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
@ -19,4 +19,28 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
SOFTWARE.
MIT LICENSE
Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

2
antd-tools/getWebpackConfig.js
View File

@ -153,7 +153,7 @@ module.exports = function (modules) {
new webpack.BannerPlugin(`
${distFileBaseName} v${pkg.version}
Copyright 2017-present, tangjinzhou, Inc.
Copyright 2017-present, vue-antd-ui, Inc.
All rights reserved.
`),
new webpack.ProgressPlugin((percentage, msg, addInfo) => {

3
components/index.js
View File

@ -40,8 +40,9 @@ const InputGroup = Input.Group
const InputSearch = Input.Search
const InputTextArea = Input.TextArea
const Textarea = InputTextArea
const TextArea = InputTextArea
export { Input, InputGroup, InputSearch, InputTextArea, Textarea }
export { Input, InputGroup, InputSearch, InputTextArea, Textarea, TextArea }
import Breadcrumb from './breadcrumb'
const BreadcrumbItem = Breadcrumb.Item

4
components/input/Group.jsx
View File

@ -1,4 +1,4 @@
import { filterEmpty } from '../_util/props-util'
export default {
name: 'InputGruop',
props: {
@ -29,7 +29,7 @@ export default {
render () {
return (
<span class={this.classes} >
{this.$slots.default}
{filterEmpty(this.$slots.default)}
</span>
)
},

17
components/input/demo/addon.vue → components/input/demo/addon.md
View File

@ -1,3 +1,14 @@
<cn>
#### 前置/后置标签
用于配置一些固定组合。
</cn>
<us>
#### Pre / Post tab
Using pre & post tabs example.
</us>
```html
<template>
<div>
<div style="margin-bottom: 16px">
@ -24,8 +35,4 @@
</div>
</div>
</template>
<script>
export default {
}
</script>
```

20
components/input/demo/autosize-textarea.md Normal file
View File

@ -0,0 +1,20 @@
<cn>
#### 适应文本高度的文本域
`autosize` 属性适用于 `textarea` 节点，并且只有高度会自动变化。另外 `autosize` 可以设定为一个对象，指定最小行数和最大行数。
</cn>
<us>
#### Autosizing the height to fit the content
`autosize` prop for a `textarea` type of `Input` makes the height to automatically adjust based on the content.
An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea will automatically adjust.
</us>
```html
<template>
<div>
<a-textarea placeholder="Autosize height based on content lines" autosize />
<div style="margin: 24px 0" />
<a-textarea placeholder="Autosize height with minimum and maximum number of lines" :autosize="{ minRows: 2, maxRows: 6 }" />
</div>
</template>
```

16
components/input/demo/autosize-textarea.vue
View File

@ -1,16 +0,0 @@
<template>
<div>
<AntTextArea placeholder="Autosize height based on content lines" autosize />
<div style="margin: 24px 0" />
<ant-textArea placeholder="Autosize height with minimum and maximum number of lines" :autosize="{ minRows: 2, maxRows: 6 }" />
</div>
</template>
<script>
import { Input } from 'antd'
export default {
components: {
AntTextArea: Input.TextArea,
},
}
</script>

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

@ -0,0 +1,15 @@
<cn>
#### 基本使用
基本使用。
</cn>
<us>
#### Basic usage
Basic usage example.
</us>
```html
<template>
<a-input placeholder="Basic usage"/>
</template>
```

3
components/input/demo/basic.vue
View File

@ -1,3 +0,0 @@
<template>
<a-input placeholder="Basic usage"/>
</template>

136
components/input/demo/group.md Normal file
View File

@ -0,0 +1,136 @@
<cn>
#### 输入框组合
输入框的组合展现。
注意：使用 `compact` 模式时，不需要通过 `Col` 来控制宽度。
</cn>
<us>
#### Input Group
Input.Group example
Note: You don't need `Col` to control the width in the `compact` mode.
</us>
```html
<template>
<div>
<a-input-group size="large">
<a-col :span="4">
<a-input defaultValue="0571" />
</a-col>
<a-col :span="8">
<a-input defaultValue="26888888" />
</a-col>
</a-input-group>
<br />
<a-input-group compact>
<a-input style="width: 20%" defaultValue="0571" />
<a-input style="width: 30%" defaultValue="26888888" />
</a-input-group>
<br />
<a-input-group compact>
<a-select defaultValue="Zhejiang">
<a-select-option value="Zhejiang">Zhejiang</a-select-option>
<a-select-option value="Jiangsu">Jiangsu</a-select-option>
</a-select>
<a-input style="width: 50%" defaultValue="Xihu District, Hangzhou" />
</a-input-group>
<br />
<a-input-group compact>
<a-select defaultValue="Option1">
<a-select-option value="Option1">Option1</a-select-option>
<a-select-option value="Option2">Option2</a-select-option>
</a-select>
<a-input style="width: 50%" defaultValue="input content" />
</a-input-group>
<br />
<a-input-group compact>
<a-input style="width: 50%" defaultValue="input content" />
<a-date-picker />
</a-input-group>
<br />
<a-input-group compact>
<a-select defaultValue="Option1-1">
<a-select-option value="Option1-1">Option1-1</a-select-option>
<a-select-option value="Option1-2">Option1-2</a-select-option>
</a-select>
<a-select defaultValue="Option2-2">
<a-select-option value="Option2-1">Option2-1</a-select-option>
<a-select-option value="Option2-2">Option2-2</a-select-option>
</a-select>
</a-input-group>
<br />
<a-input-group compact>
<a-select defaultValue="1">
<a-select-option value="1">Between</a-select-option>
<a-select-option value="2">Except</a-select-option>
</a-select>
<a-input style=" width: 100px; text-align: center" placeholder="Minimum" />
<a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="~" disabled />
<a-input style="width: 100px; text-align: center; border-left: 0" placeholder="Maximum" />
</a-input-group>
<br />
<a-input-group compact>
<a-select defaultValue="Sign Up">
<a-select-option value="Sign Up">Sign Up</a-select-option>
<a-select-option value="Sign In">Sign In</a-select-option>
</a-select>
<a-auto-complete
:dataSource="dataSource"
style="width: 200px"
@change="handleChange"
placeholder="Email"
/>
</a-input-group>
<br />
<a-input-group compact>
<a-select style="width: 30%" defaultValue="Home">
<a-select-option value="Home">Home</a-select-option>
<a-select-option value="Company">Company</a-select-option>
</a-select>
<a-cascader style="width: 70%" :options="options" placeholder="Select Address" />
</a-input-group>
</div>
</template>
<script>
const options = [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}];
export default {
data() {
return {
options,
dataSource: [],
}
},
methods: {
handleChange(value) {
this.dataSource = !value || value.indexOf('@') >= 0 ? [] : [
`${value}@gmail.com`,
`${value}@163.com`,
`${value}@qq.com`,
];
}
}
}
</script>
```

73
components/input/demo/index.vue
View File

@ -1,42 +1,57 @@
<template>
<div>
<h1>Basic</h1>
<Basic />
<h1>AutosizeTextarea</h1>
<AutosizeTextarea />
<h1>Presuffix</h1>
<Presuffix />
<h1>SearchInput</h1>
<SearchInput />
<h1>Size</h1>
<Size />
<h1>TextArea</h1>
<TextArea />
<h1>Addon</h1>
<Addon />
<h1>Tooltip</h1>
<Tooltip />
</div>
</template>
<script>
import Basic from './basic'
import AutosizeTextarea from './autosize-textarea'
import Presuffix from './presuffix'
import SearchInput from './search-input'
import Size from './size'
import Group from './group'
import TextArea from './textarea'
import Addon from './addon'
import Tooltip from './tooltip'
import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'
const md = {
cn: `# Input 输入框
通过鼠标或键盘输入内容，是最基础的表单域的包装。
## 何时使用
- 需要用户输入表单域内容时。
- 提供组合型输入框，带搜索的输入框，还可以进行大小选择。
## 代码演示`,
us: `# Input
A basic widget for getting the user input is a text field.
Keyboard and mouse can be used for providing or changing data.
## When To Use
- A user input in a form field is needed.
- A search input is required. `,
}
export default {
components: {
Basic,
AutosizeTextarea,
Presuffix,
SearchInput,
Size,
TextArea,
Addon,
Tooltip,
category: 'Components',
subtitle: '输入框',
type: 'Data Entry',
title: 'Input',
render () {
return (
<div>
<md cn={md.cn} us={md.us}/>
<Basic />
<AutosizeTextarea />
<Presuffix />
<SearchInput />
<Size />
<Group />
<TextArea />
<Addon />
<Tooltip />
<api>
<CN slot='cn' />
<US/>
</api>
</div>
)
},
}
</script>
<style>
</style>

50
components/input/demo/presuffix.md Normal file
View File

@ -0,0 +1,50 @@
<cn>
#### 前缀和后缀
在输入框上添加前缀或后缀图标。
</cn>
<us>
#### prefix and suffix
Add prefix or suffix icons inside input.
</us>
```html
<template>
<div class="components-input-demo-presuffix">
<a-input placeholder="Basic usage" v-model="userName" ref="userNameInput">
<a-icon slot="prefix" type="user" />
<a-icon v-if="userName" slot="suffix" type="close-circle" @click="emitEmpty" />
</a-input>
</template>
<script>
export default {
data () {
return {
userName: '',
}
},
methods: {
emitEmpty () {
this.$refs.userNameInput.focus()
this.userName = ''
},
},
}
</script>
<style scoped>
.components-input-demo-presuffix .anticon-close-circle {
cursor: pointer;
color: #ccc;
transition: color 0.3s;
font-size: 12px;
}
.components-input-demo-presuffix .anticon-close-circle:hover {
color: #999;
}
.components-input-demo-presuffix .anticon-close-circle:active {
color: #666;
}
</style>
```

41
components/input/demo/presuffix.vue
View File

@ -1,41 +0,0 @@
<template>
<AntInput placeholder="Basic usage" v-model="userName" ref="userNameInput">
<Icon slot="prefix" type="user" />
<Icon v-if="userName" slot="suffix" type="close-circle" @click="emitEmpty" />
</AntInput>
</template>
<script>
import { Input, Icon } from 'antd'
export default {
data () {
return {
userName: '',
}
},
methods: {
emitEmpty () {
this.$refs.userNameInput.focus()
this.userName = ''
},
},
components: {
AntInput: Input,
Icon,
},
}
</script>
<style>
.anticon-close-circle {
cursor: pointer;
color: #ccc;
transition: color 0.3s;
font-size: 12px;
}
.anticon-close-circle:hover {
color: #999;
}
.anticon-close-circle:active {
color: #666;
}
</style>

22
components/input/demo/search-input.vue → components/input/demo/search-input.md
View File

@ -1,21 +1,31 @@
<cn>
#### 搜索框
带有搜索按钮的输入框。
</cn>
<us>
#### Search box
Example of creating a search box by grouping a standard input with a search button.
</us>
```html
<template>
<Search
<a-input-search
placeholder="input search text"
style="width: 200px"
@search="onSearch"
/>
</template>
<script>
import { Input } from 'antd'
<script>
export default {
methods: {
onSearch (value) {
console.log(value)
},
},
components: {
Search: Input.Search,
},
}
</script>
```

29
components/input/demo/size.md Normal file
View File

@ -0,0 +1,29 @@
<cn>
#### 三种大小
我们为 `<Input />` 输入框定义了三种尺寸（大、默认、小），高度分别为 `40px`、`32px` 和 `24px`。
注意： 在表单里面，我们只使用大尺寸的输入框。
</cn>
<us>
#### Three sizes of Input
There are three sizes of an Input box: `large` (40px)、`default` (32px) and `small` (24px).
Note: Inside of forms, only the large size is used.
</us>
```html
<template>
<div class="components-input-demo-size">
<a-input size="large" placeholder="large size" />
<a-input placeholder="default size" />
<a-input size="small" placeholder="small size" />
</div>
</template>
<style scoped>
.components-input-demo-size .ant-input {
width: 200px;
margin: 0 8px 8px 0;
}
</style>
```

23
components/input/demo/size.vue
View File

@ -1,23 +0,0 @@
<template>
<div class="example-input">
<AntInput size="large" placeholder="large size" />
<AntInput placeholder="default size" />
<AntInput size="small" placeholder="small size" />
</div>
</template>
<script>
import { Input } from 'antd'
export default {
components: {
AntInput: Input,
},
}
</script>
<style>
.example-input .ant-input {
width: 200px;
margin: 0 8px 8px 0;
}
</style>

17
components/input/demo/textarea.md Normal file
View File

@ -0,0 +1,17 @@
<cn>
#### 文本域
用于多行输入。
</cn>
<us>
#### TextArea
For multi-line input.
</us>
```html
<template>
<a-textarea placeholder="Basic usage" :rows="4"/>
</template>
```

12
components/input/demo/textarea.vue
View File

@ -1,12 +0,0 @@
<template>
<AntTextArea placeholder="Basic usage" :rows="4"/>
</template>
<script>
import { Input } from 'antd'
export default {
components: {
AntTextArea: Input.TextArea,
},
}
</script>

15
components/input/demo/tooltip.vue → components/input/demo/tooltip.md
View File

@ -1,3 +1,15 @@
<cn>
#### 输入时格式化展示
结合 [Tooltip](#/cn/components/tooltip) 组件，实现一个数值输入框，方便内容超长时的全量展现。
</cn>
<us>
#### Format Tooltip Input
You can use the Input in conjunction with [Tooltip](#/cn/components/tooltip) component to create a Numeric Input, which can provide a good experience for extra-long content display.
</us>
```html
<template>
<a-tooltip
:trigger="['focus']"
@ -39,12 +51,12 @@ function formatNumber (value) {
export default {
data () {
this.formatNumber = formatNumber
return {
value: '',
}
},
methods: {
formatNumber,
onChange (e) {
const { value } = e.target
const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/
@ -74,3 +86,4 @@ or the height is not enough when content is empty */
font-size: 14px;
}
</style>
```

68
components/input/index.en-US.md Normal file
View File

@ -0,0 +1,68 @@
## API
### Input
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| addonAfter | The label text displayed after (on the right side of) the input field. | string\|slot | |
| addonBefore | The label text displayed before (on the left side of) the input field. | string\|slot | |
| defaultValue | The initial input content | string | |
| disabled | Whether the input is disabled. | boolean | false |
| id | The ID for input | string | |
| prefix | The prefix icon for the Input. | string\|slot | |
| size | The size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | string | `default` |
| suffix | The suffix icon for the Input. | string\|slot | |
| type | The type of input, see: [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)(use `Input.TextArea` instead of `type="textarea"`) | string | `text` |
| value(v-model) | The input content value | string | |
### Input Events
| Events Name | Description | Arguments |
| --- | --- | --- |
| pressEnter | The callback function that is triggered when Enter key is pressed. | function(e) |
> When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined
> then `value`, `defaultValue`, and `id` props of `Input` are automatically set.
### Input.TextArea
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| autosize | Height autosize feature, can be set to `true|false` or an object `{ minRows: 2, maxRows: 6 }` | boolean\|object | false |
| defaultValue | The initial input content | string | |
| value(v-model) | The input content value | string | |
### Input.TextArea Events
| Events Name | Description | Arguments |
| --- | --- | --- |
| pressEnter | The callback function that is triggered when Enter key is pressed. | function(e) |
The rest of the props of `Input.TextArea` are the same as the original [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea).
#### Input.Search
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| enterButton | to show a enter button after input | boolean\|slot | false |
### Input.Search Events
| Events Name | Description | Arguments |
| --- | --- | --- |
| search | The callback function that is triggered when you click on the search-icon or press Enter key. | function(value) |
Supports all props of `Input`.
#### Input.Group
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| compact | Whether use compact style | boolean | false |
| size | The size of `Input.Group` specifies the size of the included `Input` fields. Available: `large` `default` `small` | string | `default` |
````html
<a-input-group>
<a-input />
<a-input />
</a-input-group>
````

67
components/input/index.zh-CN.md Normal file
View File

@ -0,0 +1,67 @@
## API
### Input
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| addonAfter | 带标签的 input，设置后置标签 | string\|slot | |
| addonBefore | 带标签的 input，设置前置标签 | string\|slot | |
| defaultValue | 输入框默认内容 | string | |
| disabled | 是否禁用状态，默认为 false | boolean | false |
| id | 输入框的 id | string | |
| prefix | 带有前缀图标的 input | string\|slot | |
| size | 控件大小。注：标准表单内的输入框大小限制为 `large`。可选 `large` `default` `small` | string | `default` |
| suffix | 带有后缀图标的 input | string\|ReactNode | |
| type | 声明 input 类型，同原生 input 标签的 type 属性，见：[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#属性)(请直接使用 `Input.TextArea` 代替 `type="textarea"`)。 | string | `text` |
| value(v-model) | 输入框内容 | string | |
### Input 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| pressEnter | 按下回车的回调 | function(e) |
> 如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 和 `options` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
### Input.TextArea
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autosize | 自适应内容高度，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | boolean\|object | false |
| defaultValue | 输入框默认内容 | string | |
| value(v-model) | 输入框内容 | string | |
### Input.TextArea事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| pressEnter | 按下回车的回调 | function(e) |
`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
#### Input.Search
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| enterButton | 是否有确认按钮，可设为按钮文字 | boolean\|ReactNode | false |
### Input.Search 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| search | 点击搜索或按下回车键时的回调 | function(value) |
其余属性和 Input 一致。
#### Input.Group
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| compact | 是否用紧凑模式 | boolean | false |
| size | `Input.Group` 中所有的 `Input` 的大小，可选 `large` `default` `small` | string | `default` |
````html
<a-input-group>
<a-input />
<a-input />
</a-input-group>
````

130
components/locale-provider/demo/all.md Normal file
View File

@ -0,0 +1,130 @@
<cn>
#### 所有组件
此处列出 Ant Design 中需要国际化支持的组件，你可以在演示里切换语言。
</cn>
<us>
#### All components
Components which need localization support are listed here, you can toggle the language in the demo.
</us>
```html
<template>
<div>
<div class="change-locale">
<span :style="{ marginRight: '16px' }">Change locale of components: </span>
<a-radio-group :defaultValue="null" @change="changeLocale">
<a-radio-button key="en" :value="null">English</a-radio-button>
<a-radio-button key="cn" :value="zhCN">中文</a-radio-button>
</a-radio-group>
</div>
<a-locale-provider :locale="locale">
<div class="locale-components" :key="(!!locale).toString()"> <!-- HACK: just refresh in production environment-->
<div class="example">
<a-pagination :defaultCurrent="1" :total="50" showSizeChanger />
</div>
<div class="example">
<a-select showSearch style="width: 200px">
<a-select-option value="jack">jack</a-select-option>
<a-select-option value="lucy">lucy</a-select-option>
</a-select>
<a-date-picker />
<a-time-picker />
<a-range-picker style=" width: 200px " />
</div>
<div class="example">
<a-button type="primary" @click="showModal">Show Modal</a-button>
<a-button @click="info">Show info</a-button>
<a-button @click="confirm">Show confirm</a-button>
<a-popconfirm title="Question?">
<a href="#">Click to confirm</a>
</a-popconfirm>
</div>
<div :style="{ width: '319px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
<a-calendar :fullscreen="false" :value="moment()" />
</div>
<a-modal title="Locale Modal" v-model="visible">
<p>Locale Modal</p>
</a-modal>
</div>
</LocaleProvider>
</div>
</template>
<script>
// you should use import zhCN from 'antd/lib/locale-provider/zh_CN'
import zhCN from 'antd/locale-provider/zh_CN';
import { Modal } from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('en');
const columns = [{
title: 'Name',
dataIndex: 'name',
filters: [{
text: 'filter1',
value: 'filter1',
}],
}, {
title: 'Age',
dataIndex: 'age',
}];
export default {
data() {
return {
visible: false,
locale: null,
zhCN,
}
},
methods: {
moment,
showModal() {
this.visible = true;
},
hideModal() {
this.visible = false;
},
info() {
Modal.info({
title: 'some info',
content: 'some info',
});
},
confirm() {
Modal.confirm({
title: 'some info',
content: 'some info',
});
},
changeLocale(e) {
const localeValue = e.target.value;
this.locale = localeValue
if (!localeValue) {
moment.locale('en');
} else {
moment.locale('zh-cn');
}
},
}
}
</script>
<style scoped>
.locale-components {
border-top: 1px solid #d9d9d9;
padding-top: 16px;
}
.example {
margin: 16px 0;
}
.example > * {
margin-right: 8px;
}
.change-locale {
margin-bottom: 16px;
}
</style>
```

28
components/locale-provider/demo/basic.md Normal file
View File

@ -0,0 +1,28 @@
<cn>
#### 国际化
用 `LocaleProvider` 包裹你的应用，并引用对应的语言包。
</cn>
<us>
#### Localization
Wrap your app with `LocaleProvider`, and apply the corresponding language package.
</us>
```html
<template>
<a-locale-provider :locale="enUS">
<a-pagination :defaultCurrent="1" :total="50" showSizeChanger />
</a-locale-provider>
</template>
<script>
// you should use import enUS from 'antd/lib/locale-provider/en_US';
import enUS from 'antd/locale-provider/en_US';
export default {
data(){
return {
enUS,
}
}
}
</script>
```

25
components/locale-provider/demo/index.vue Normal file
View File

@ -0,0 +1,25 @@
<script>
import Basic from './basic'
import All from './all'
import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'
export default {
category: 'Components',
subtitle: '国际化',
cols: 1,
type: 'Other',
title: 'LocaleProvider',
render () {
return (
<div>
<api>
<CN slot='cn' />
<US/>
</api>
<Basic />
<All />
</div>
)
},
}
</script>

58
components/locale-provider/index.en-US.md Normal file
View File

@ -0,0 +1,58 @@
# LocaleProvider
`LocaleProvider` provides a uniform localization support for built-in text of components.
## Usage
`LocaleProvider` takes use of [provide/inject](https://vuejs.org/v2/api/#provide-inject), a feature of Vue, to accomplish global effectiveness by wrapping the app only once.
````html
<template>
<a-locale-provider :locale="fr_FR">
<App />
<a-locale-provider>
</template>
<script>
import fr_FR from 'antd/lib/locale-provider/fr_FR';
import 'moment/locale/zh-cn';
export default {
data() {
return {
fr_FR,
}
}
}
</script>
````
We provide some locale like English, Chinese, Russian, German, French and etc, all locale packages can be found in [here](https://github.com/vueComponent/ant-design/tree/master/components/locale-provider).
Note: if you need to use antd's UMD dist file, please use `antd/dist/antd-with-locales.js` and corresponding moment locale:
````html
<template>
<a-locale-provider :locale="locales.fr_FR">
<App />
<a-locale-provider>
</template>
<script>
const { LocaleProvider, locales } = window.antd;
</script>
````
### Add a new language
If you can't find your language, you are welcome to create a locale package based on [en_US](https://github.com/vueComponent/ant-design/blob/master/components/locale-provider/en_US.js) and send us a pull request.
### Other localization needs
This component aims for localization of the built-in text, if you want to support other documents, we recommend using [vue-i18n](https://github.com/kazupon/vue-i18n).
## API
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| locale | language package setting, you can find the packages in this path: `antd/lib/locale-provider/` | object | - |
## Examples

10
components/locale-provider/index.jsx
View File

@ -1,7 +1,7 @@
import PropTypes from '../_util/vue-types'
import * as moment from 'moment'
// import { ModalLocale, changeConfirmLocale } from '../modal/locale'
import { changeConfirmLocale } from '../modal/locale'
// export interface Locale {
// locale: string;
@ -55,14 +55,14 @@ export default {
beforeMount () {
const { locale } = this
setMomentLocale(locale)
// changeConfirmLocale(locale && locale.Modal)
changeConfirmLocale(locale && locale.Modal)
},
updated () {
// const { locale } = this
// changeConfirmLocale(locale && locale.Modal)
const { locale } = this
changeConfirmLocale(locale && locale.Modal)
},
beforeDestroy () {
// changeConfirmLocale()
changeConfirmLocale()
},
render () {
return this.$slots.default[0]

57
components/locale-provider/index.zh-CN.md Normal file
View File

@ -0,0 +1,57 @@
# LocaleProvider 国际化
为组件内建文案提供统一的国际化支持。
## 使用
LocaleProvider 使用 Vue 的 [provide/inject](https://cn.vuejs.org/v2/api/#provide-inject) 特性，只需在应用外围包裹一次即可全局生效。
````html
<template>
<a-locale-provider :locale="zh_CN">
<App />
<a-locale-provider>
</template>
<script>
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';
export default {
data() {
return {
zh_CN,
}
}
}
</script>
````
我们提供了英语，中文，俄语，法语，德语等多种语言支持，所有语言包可以在 [这里](https://github.com/vueComponent/ant-design/tree/master/components/locale-provider) 找到。
注意：如果你需要使用 UMD 版的 dist 文件，应该引入 `antd/dist/antd-with-locales.js`，同时引入 moment 对应的 locale，然后按以下方式使用：
````html
<template>
<a-locale-provider :locale="locales.en_US">
<App />
<a-locale-provider>
</template>
<script>
const { LocaleProvider, locales } = window.antd;
</script>
````
### 增加语言包
如果你找不到你需要的语言包，欢迎你在 [英文语言包](https://github.com/vueComponent/ant-design/blob/master/components/locale-provider/en_US.js) 的基础上创建一个新的语言包，并给我们 Pull Request。
### 其他国际化需求
本模块仅用于组件的内建文案，若有业务文案的国际化需求，建议使用 [vue-i18n](https://github.com/kazupon/vue-i18n)
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| locale | 语言包配置，语言包可到 `antd/lib/locale-provider/` 目录下寻找 | object | - |
## 代码演示

48
components/popconfirm/index.jsx
View File

@ -8,6 +8,8 @@ import BaseMixin from '../_util/BaseMixin'
import buttonTypes from '../button/buttonTypes'
import Icon from '../icon'
import Button from '../button'
import LocaleReceiver from '../locale-provider/LocaleReceiver'
import defaultLocale from '../locale-provider/default'
const tooltipProps = abstractTooltipProps()
const btnProps = buttonTypes()
@ -63,9 +65,29 @@ export default {
getPopupDomNode () {
return this.$refs.tooltip.getPopupDomNode()
},
renderOverlay (popconfirmLocale) {
const { prefixCls, okType } = this
return (
<div class={`${prefixCls}-inner-content`}>
<div class={`${prefixCls}-message`}>
<Icon type='exclamation-circle' />
<div class={`${prefixCls}-message-title`}>
{getComponentFromProp(this, 'title')}
</div>
</div>
<div class={`${prefixCls}-buttons`}>
<Button onClick={this.onCancel} size='small'>
{getComponentFromProp(this, 'cancelText') || popconfirmLocale.cancelText}
</Button>
<Button onClick={this.onConfirm} type={okType} size='small'>
{getComponentFromProp(this, 'okText') || popconfirmLocale.okText}
</Button>
</div>
</div>
)
},
},
render (h) {
const { prefixCls, okType } = this.$props
const props = getOptionProps(this)
const otherProps = omit(props, [
'title',
@ -84,23 +106,13 @@ export default {
},
}
const overlay = (
<div class={`${prefixCls}-inner-content`}>
<div class={`${prefixCls}-message`}>
<Icon type='exclamation-circle' />
<div class={`${prefixCls}-message-title`}>
{getComponentFromProp(this, 'title')}
</div>
</div>
<div class={`${prefixCls}-buttons`}>
<Button onClick={this.onCancel} size='small'>
{getComponentFromProp(this, 'cancelText')}
</Button>
<Button onClick={this.onConfirm} type={okType} size='small'>
{getComponentFromProp(this, 'okText')}
</Button>
</div>
</div>
)
<LocaleReceiver
componentName='Popconfirm'
defaultLocale={defaultLocale.Popconfirm}
scopedSlots={
{ default: this.renderOverlay }
}
/>)
return (
<Tooltip
{...tooltipProps}

12
components/radio/Group.jsx
View File

@ -1,4 +1,4 @@
import PropTypes from '../_util/vue-types'
import Radio from './Radio'
export default {
name: 'RadioGroup',
@ -7,14 +7,8 @@ export default {
default: 'ant-radio-group',
type: String,
},
defaultValue: {
default: undefined,
type: [String, Number],
},
value: {
default: undefined,
type: [String, Number],
},
defaultValue: PropTypes.any,
value: PropTypes.any,
size: {
default: 'default',
validator (value) {

6
components/radio/Radio.jsx
View File

@ -1,4 +1,4 @@
import PropTypes from '../_util/vue-types'
import hasProp from '../_util/props-util'
export default {
name: 'Radio',
@ -11,7 +11,7 @@ export default {
checked: { type: Boolean, default: undefined },
disabled: Boolean,
isGroup: Boolean,
value: [String, Number, Boolean],
value: PropTypes.any,
name: String,
},
model: {
@ -23,7 +23,7 @@ export default {
data () {
const { radioGroupContext, checked, defaultChecked, value } = this
let stateChecked
if (radioGroupContext && radioGroupContext.stateValue) {
if (radioGroupContext && radioGroupContext.stateValue !== undefined) {
stateChecked = radioGroupContext.stateValue === value
}
return {

1
examples/demo.js
View File

@ -34,3 +34,4 @@ export { default as timePicker } from 'antd/time-picker/demo/index.vue'
export { default as steps } from 'antd/steps/demo/index.vue'
export { default as calendar } from 'antd/calendar/demo/index.vue'
export { default as datePicker } from 'antd/date-picker/demo/index.vue'
export { default as localeProvider } from 'antd/locale-provider/demo/index.vue'

2
examples/routes.js
View File

@ -3,7 +3,7 @@ const AsyncComp = () => {
const hashs = window.location.hash.split('/')
const d = hashs[hashs.length - 1]
return {
component: import(`../components/date-picker/demo/${d}`),
component: import(`../components/locale-provider/demo/${d}`),
}
}
export default [