update license and add input doc locale doc
tangjinzhou
parent
bb50ac5736
commit
f1587ace7e
|
|
@ -1,5 +1,6 @@
|
||||||
{
|
{
|
||||||
"extends": "stylelint-config-standard",
|
"extends": "stylelint-config-standard",
|
||||||
|
"ignoreFiles": "./components/**",
|
||||||
"rules": {
|
"rules": {
|
||||||
"comment-empty-line-before": null,
|
"comment-empty-line-before": null,
|
||||||
"declaration-empty-line-before": null,
|
"declaration-empty-line-before": null,
|
||||||
|
|
|
||||||
28
LICENSE
28
LICENSE
|
|
@ -1,7 +1,7 @@
|
||||||
|
|
||||||
MIT License
|
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
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
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
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
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
|
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.
|
||||||
|
|
|
||||||
|
|
@ -153,7 +153,7 @@ module.exports = function (modules) {
|
||||||
new webpack.BannerPlugin(`
|
new webpack.BannerPlugin(`
|
||||||
${distFileBaseName} v${pkg.version}
|
${distFileBaseName} v${pkg.version}
|
||||||
|
|
||||||
Copyright 2017-present, tangjinzhou, Inc.
|
Copyright 2017-present, vue-antd-ui, Inc.
|
||||||
All rights reserved.
|
All rights reserved.
|
||||||
`),
|
`),
|
||||||
new webpack.ProgressPlugin((percentage, msg, addInfo) => {
|
new webpack.ProgressPlugin((percentage, msg, addInfo) => {
|
||||||
|
|
|
||||||
|
|
@ -40,8 +40,9 @@ const InputGroup = Input.Group
|
||||||
const InputSearch = Input.Search
|
const InputSearch = Input.Search
|
||||||
const InputTextArea = Input.TextArea
|
const InputTextArea = Input.TextArea
|
||||||
const Textarea = InputTextArea
|
const Textarea = InputTextArea
|
||||||
|
const TextArea = InputTextArea
|
||||||
|
|
||||||
export { Input, InputGroup, InputSearch, InputTextArea, Textarea }
|
export { Input, InputGroup, InputSearch, InputTextArea, Textarea, TextArea }
|
||||||
|
|
||||||
import Breadcrumb from './breadcrumb'
|
import Breadcrumb from './breadcrumb'
|
||||||
const BreadcrumbItem = Breadcrumb.Item
|
const BreadcrumbItem = Breadcrumb.Item
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
|
import { filterEmpty } from '../_util/props-util'
|
||||||
export default {
|
export default {
|
||||||
name: 'InputGruop',
|
name: 'InputGruop',
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -29,7 +29,7 @@ export default {
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<span class={this.classes} >
|
<span class={this.classes} >
|
||||||
{this.$slots.default}
|
{filterEmpty(this.$slots.default)}
|
||||||
</span>
|
</span>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,14 @@
|
||||||
|
<cn>
|
||||||
|
#### 前置/后置标签
|
||||||
|
用于配置一些固定组合。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Pre / Post tab
|
||||||
|
Using pre & post tabs example.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div style="margin-bottom: 16px">
|
<div style="margin-bottom: 16px">
|
||||||
|
|
@ -24,8 +35,4 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
```
|
||||||
export default {
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -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>
|
||||||
|
```
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
<cn>
|
||||||
|
#### 基本使用
|
||||||
|
基本使用。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Basic usage
|
||||||
|
Basic usage example.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-input placeholder="Basic usage"/>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
<template>
|
|
||||||
<a-input placeholder="Basic usage"/>
|
|
||||||
</template>
|
|
||||||
|
|
@ -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>
|
||||||
|
```
|
||||||
|
|
@ -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>
|
<script>
|
||||||
import Basic from './basic'
|
import Basic from './basic'
|
||||||
import AutosizeTextarea from './autosize-textarea'
|
import AutosizeTextarea from './autosize-textarea'
|
||||||
import Presuffix from './presuffix'
|
import Presuffix from './presuffix'
|
||||||
import SearchInput from './search-input'
|
import SearchInput from './search-input'
|
||||||
import Size from './size'
|
import Size from './size'
|
||||||
|
import Group from './group'
|
||||||
import TextArea from './textarea'
|
import TextArea from './textarea'
|
||||||
import Addon from './addon'
|
import Addon from './addon'
|
||||||
import Tooltip from './tooltip'
|
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 {
|
export default {
|
||||||
components: {
|
category: 'Components',
|
||||||
Basic,
|
subtitle: '输入框',
|
||||||
AutosizeTextarea,
|
type: 'Data Entry',
|
||||||
Presuffix,
|
title: 'Input',
|
||||||
SearchInput,
|
render () {
|
||||||
Size,
|
return (
|
||||||
TextArea,
|
<div>
|
||||||
Addon,
|
<md cn={md.cn} us={md.us}/>
|
||||||
Tooltip,
|
<Basic />
|
||||||
|
<AutosizeTextarea />
|
||||||
|
<Presuffix />
|
||||||
|
<SearchInput />
|
||||||
|
<Size />
|
||||||
|
<Group />
|
||||||
|
<TextArea />
|
||||||
|
<Addon />
|
||||||
|
<Tooltip />
|
||||||
|
<api>
|
||||||
|
<CN slot='cn' />
|
||||||
|
<US/>
|
||||||
|
</api>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
<template>
|
||||||
<Search
|
<a-input-search
|
||||||
placeholder="input search text"
|
placeholder="input search text"
|
||||||
style="width: 200px"
|
style="width: 200px"
|
||||||
@search="onSearch"
|
@search="onSearch"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
|
||||||
|
|
||||||
import { Input } from 'antd'
|
<script>
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
onSearch (value) {
|
onSearch (value) {
|
||||||
console.log(value)
|
console.log(value)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
|
||||||
Search: Input.Search,
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
|
||||||
|
<cn>
|
||||||
|
#### 文本域
|
||||||
|
用于多行输入。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### TextArea
|
||||||
|
For multi-line input.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-textarea placeholder="Basic usage" :rows="4"/>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
<template>
|
|
||||||
<AntTextArea placeholder="Basic usage" :rows="4"/>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
|
|
||||||
import { Input } from 'antd'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
AntTextArea: Input.TextArea,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -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>
|
<template>
|
||||||
<a-tooltip
|
<a-tooltip
|
||||||
:trigger="['focus']"
|
:trigger="['focus']"
|
||||||
|
|
@ -39,12 +51,12 @@ function formatNumber (value) {
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
this.formatNumber = formatNumber
|
|
||||||
return {
|
return {
|
||||||
value: '',
|
value: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
formatNumber,
|
||||||
onChange (e) {
|
onChange (e) {
|
||||||
const { value } = e.target
|
const { value } = e.target
|
||||||
const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/
|
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;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
```
|
||||||
|
|
@ -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>
|
||||||
|
````
|
||||||
|
|
@ -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>
|
||||||
|
````
|
||||||
|
|
@ -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>
|
||||||
|
```
|
||||||
|
|
@ -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>
|
||||||
|
```
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
|
|
||||||
import PropTypes from '../_util/vue-types'
|
import PropTypes from '../_util/vue-types'
|
||||||
import * as moment from 'moment'
|
import * as moment from 'moment'
|
||||||
// import { ModalLocale, changeConfirmLocale } from '../modal/locale'
|
import { changeConfirmLocale } from '../modal/locale'
|
||||||
|
|
||||||
// export interface Locale {
|
// export interface Locale {
|
||||||
// locale: string;
|
// locale: string;
|
||||||
|
|
@ -55,14 +55,14 @@ export default {
|
||||||
beforeMount () {
|
beforeMount () {
|
||||||
const { locale } = this
|
const { locale } = this
|
||||||
setMomentLocale(locale)
|
setMomentLocale(locale)
|
||||||
// changeConfirmLocale(locale && locale.Modal)
|
changeConfirmLocale(locale && locale.Modal)
|
||||||
},
|
},
|
||||||
updated () {
|
updated () {
|
||||||
// const { locale } = this
|
const { locale } = this
|
||||||
// changeConfirmLocale(locale && locale.Modal)
|
changeConfirmLocale(locale && locale.Modal)
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
// changeConfirmLocale()
|
changeConfirmLocale()
|
||||||
},
|
},
|
||||||
render () {
|
render () {
|
||||||
return this.$slots.default[0]
|
return this.$slots.default[0]
|
||||||
|
|
|
||||||
|
|
@ -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 | - |
|
||||||
|
|
||||||
|
## 代码演示
|
||||||
|
|
@ -8,6 +8,8 @@ import BaseMixin from '../_util/BaseMixin'
|
||||||
import buttonTypes from '../button/buttonTypes'
|
import buttonTypes from '../button/buttonTypes'
|
||||||
import Icon from '../icon'
|
import Icon from '../icon'
|
||||||
import Button from '../button'
|
import Button from '../button'
|
||||||
|
import LocaleReceiver from '../locale-provider/LocaleReceiver'
|
||||||
|
import defaultLocale from '../locale-provider/default'
|
||||||
|
|
||||||
const tooltipProps = abstractTooltipProps()
|
const tooltipProps = abstractTooltipProps()
|
||||||
const btnProps = buttonTypes()
|
const btnProps = buttonTypes()
|
||||||
|
|
@ -63,9 +65,29 @@ export default {
|
||||||
getPopupDomNode () {
|
getPopupDomNode () {
|
||||||
return this.$refs.tooltip.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) {
|
render (h) {
|
||||||
const { prefixCls, okType } = this.$props
|
|
||||||
const props = getOptionProps(this)
|
const props = getOptionProps(this)
|
||||||
const otherProps = omit(props, [
|
const otherProps = omit(props, [
|
||||||
'title',
|
'title',
|
||||||
|
|
@ -84,23 +106,13 @@ export default {
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
const overlay = (
|
const overlay = (
|
||||||
<div class={`${prefixCls}-inner-content`}>
|
<LocaleReceiver
|
||||||
<div class={`${prefixCls}-message`}>
|
componentName='Popconfirm'
|
||||||
<Icon type='exclamation-circle' />
|
defaultLocale={defaultLocale.Popconfirm}
|
||||||
<div class={`${prefixCls}-message-title`}>
|
scopedSlots={
|
||||||
{getComponentFromProp(this, 'title')}
|
{ default: this.renderOverlay }
|
||||||
</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>
|
|
||||||
)
|
|
||||||
return (
|
return (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
{...tooltipProps}
|
{...tooltipProps}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
|
import PropTypes from '../_util/vue-types'
|
||||||
import Radio from './Radio'
|
import Radio from './Radio'
|
||||||
export default {
|
export default {
|
||||||
name: 'RadioGroup',
|
name: 'RadioGroup',
|
||||||
|
|
@ -7,14 +7,8 @@ export default {
|
||||||
default: 'ant-radio-group',
|
default: 'ant-radio-group',
|
||||||
type: String,
|
type: String,
|
||||||
},
|
},
|
||||||
defaultValue: {
|
defaultValue: PropTypes.any,
|
||||||
default: undefined,
|
value: PropTypes.any,
|
||||||
type: [String, Number],
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
default: undefined,
|
|
||||||
type: [String, Number],
|
|
||||||
},
|
|
||||||
size: {
|
size: {
|
||||||
default: 'default',
|
default: 'default',
|
||||||
validator (value) {
|
validator (value) {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
|
import PropTypes from '../_util/vue-types'
|
||||||
import hasProp from '../_util/props-util'
|
import hasProp from '../_util/props-util'
|
||||||
export default {
|
export default {
|
||||||
name: 'Radio',
|
name: 'Radio',
|
||||||
|
|
@ -11,7 +11,7 @@ export default {
|
||||||
checked: { type: Boolean, default: undefined },
|
checked: { type: Boolean, default: undefined },
|
||||||
disabled: Boolean,
|
disabled: Boolean,
|
||||||
isGroup: Boolean,
|
isGroup: Boolean,
|
||||||
value: [String, Number, Boolean],
|
value: PropTypes.any,
|
||||||
name: String,
|
name: String,
|
||||||
},
|
},
|
||||||
model: {
|
model: {
|
||||||
|
|
@ -23,7 +23,7 @@ export default {
|
||||||
data () {
|
data () {
|
||||||
const { radioGroupContext, checked, defaultChecked, value } = this
|
const { radioGroupContext, checked, defaultChecked, value } = this
|
||||||
let stateChecked
|
let stateChecked
|
||||||
if (radioGroupContext && radioGroupContext.stateValue) {
|
if (radioGroupContext && radioGroupContext.stateValue !== undefined) {
|
||||||
stateChecked = radioGroupContext.stateValue === value
|
stateChecked = radioGroupContext.stateValue === value
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -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 steps } from 'antd/steps/demo/index.vue'
|
||||||
export { default as calendar } from 'antd/calendar/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 datePicker } from 'antd/date-picker/demo/index.vue'
|
||||||
|
export { default as localeProvider } from 'antd/locale-provider/demo/index.vue'
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ const AsyncComp = () => {
|
||||||
const hashs = window.location.hash.split('/')
|
const hashs = window.location.hash.split('/')
|
||||||
const d = hashs[hashs.length - 1]
|
const d = hashs[hashs.length - 1]
|
||||||
return {
|
return {
|
||||||
component: import(`../components/date-picker/demo/${d}`),
|
component: import(`../components/locale-provider/demo/${d}`),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export default [
|
export default [
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue