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

feat: update breadcrumb && button

pull/666/head
wangxueliang 2019-03-13 09:38:54 +08:00
parent 40ddc851bc
commit 9b5082fee9
9 changed files with 83 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/breadcrumb/Breadcrumb.jsx
View File

@ -2,6 +2,7 @@ import PropTypes from '../_util/vue-types';
import { cloneElement } from '../_util/vnode';
import { filterEmpty, getComponentFromProp, getSlotOptions } from '../_util/props-util';
import warning from '../_util/warning';
import { ConfigConsumerProps } from '../config-provider';
import BreadcrumbItem from './BreadcrumbItem';
const Route = PropTypes.shape({
@ -10,7 +11,7 @@ const Route = PropTypes.shape({
}).loose;
const BreadcrumbProps = {
prefixCls: PropTypes.string.def('ant-breadcrumb'),
prefixCls: PropTypes.string,
routes: PropTypes.arrayOf(Route),
params: PropTypes.any,
separator: PropTypes.any,
@ -32,6 +33,9 @@ function getBreadcrumbName(route, params) {
export default {
name: 'ABreadcrumb',
props: BreadcrumbProps,
inject: {
configProvider: { default: () => ({}) },
},
methods: {
defaultItemRender({ route, params, routes, paths }) {
const isLastItem = routes.indexOf(route) === routes.length - 1;
@ -41,7 +45,10 @@ export default {
},
render() {
let crumbs;
const { prefixCls, routes, params = {}, $slots, $scopedSlots } = this;
const { prefixCls: customizePrefixCls, routes, params = {}, $slots, $scopedSlots } = this;
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
const children = filterEmpty($slots.default);
const separator = getComponentFromProp(this, 'separator');
if (routes && routes.length > 0) {

11
components/breadcrumb/BreadcrumbItem.jsx
View File

@ -1,16 +1,23 @@
import PropTypes from '../_util/vue-types';
import { hasProp, getComponentFromProp } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider';
export default {
name: 'ABreadcrumbItem',
__ANT_BREADCRUMB_ITEM: true,
props: {
prefixCls: PropTypes.string.def('ant-breadcrumb'),
prefixCls: PropTypes.string,
href: PropTypes.string,
separator: PropTypes.any,
},
inject: {
configProvider: { default: () => ({}) },
},
render() {
const { prefixCls, $slots } = this;
const { prefixCls: customizePrefixCls, $slots } = this;
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
const children = $slots.default;
let link;
if (hasProp(this, 'href')) {

39
components/button/button-group.jsx
View File

@ -1,7 +1,8 @@
import { filterEmpty } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider';
const ButtonGroupProps = {
prefixCls: {
default: 'ant-btn-group',
type: String,
},
size: {
@ -14,6 +15,9 @@ export { ButtonGroupProps };
export default {
name: 'AButtonGroup',
props: ButtonGroupProps,
inject: {
configProvider: { default: () => ({}) },
},
data() {
return {
sizeMap: {
@ -22,20 +26,27 @@ export default {
},
};
},
computed: {
classes() {
const { prefixCls, size, sizeMap } = this;
const sizeCls = sizeMap[size] || '';
return [
{
[`${prefixCls}`]: true,
[`${prefixCls}-${sizeCls}`]: sizeCls,
},
];
},
},
render() {
const { classes, $slots } = this;
const { prefixCls: customizePrefixCls, size, sizeMap, $slots } = this;
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
const prefixCls = getPrefixCls('btn-group', customizePrefixCls);
// large => lg
// small => sm
let sizeCls = '';
switch (size) {
case 'large':
sizeCls = 'lg';
break;
case 'small':
sizeCls = 'sm';
default:
break;
}
const classes = {
[`${prefixCls}`]: true,
[`${prefixCls}-${sizeCls}`]: sizeCls,
};
return <div class={classes}>{filterEmpty($slots.default)}</div>;
},
};

21
components/button/button.jsx
View File

@ -1,22 +1,26 @@
import Wave from '../_util/wave';
import Icon from '../icon';
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
import buttonTypes from './buttonTypes';
import { filterEmpty } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider';
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
const props = buttonTypes();
export default {
name: 'AButton',
inheritAttrs: false,
__ANT_BUTTON: true,
props,
inject: {
configProvider: { default: () => ({}) },
},
data() {
return {
sizeMap: {
large: 'lg',
small: 'sm',
},
// clicked: false,
sLoading: !!this.loading,
hasTwoCNChar: false,
};
@ -24,7 +28,7 @@ export default {
computed: {
classes() {
const {
prefixCls,
prefixCls: customizePrefixCls,
type,
shape,
size,
@ -36,6 +40,10 @@ export default {
icon,
$slots,
} = this;
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
const prefixCls = getPrefixCls('btn', customizePrefixCls);
const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
const sizeCls = sizeMap[size] || '';
const children = filterEmpty($slots.default);
return {
@ -46,7 +54,7 @@ export default {
[`${prefixCls}-icon-only`]: !children && children !== 0 && icon,
[`${prefixCls}-loading`]: sLoading,
[`${prefixCls}-background-ghost`]: ghost || type === 'ghost',
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar,
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
[`${prefixCls}-block`]: block,
};
},
@ -142,7 +150,8 @@ export default {
const iconType = sLoading ? 'loading' : icon;
const iconNode = iconType ? <Icon type={iconType} /> : null;
const children = filterEmpty($slots.default);
const kids = children.map(child => this.insertSpace(child, this.isNeedInserted()));
const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
const kids = children.map(child => this.insertSpace(child, this.isNeedInserted() && autoInsertSpace));
if ($attrs.href !== undefined) {
return (

4
components/button/buttonTypes.js
View File

@ -1,10 +1,10 @@
import PropTypes from '../_util/vue-types';
export default () => ({
prefixCls: PropTypes.string.def('ant-btn'),
prefixCls: PropTypes.string,
type: PropTypes.oneOf(['primary', 'danger', 'dashed', 'ghost', 'default']).def('default'),
htmlType: PropTypes.oneOf(['button', 'submit', 'reset']).def('button'),
icon: PropTypes.string,
shape: PropTypes.oneOf(['circle', 'circle-outline']),
shape: PropTypes.oneOf(['circle', 'circle-outline', 'round']),
size: PropTypes.oneOf(['small', 'large', 'default']).def('default'),
loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
disabled: PropTypes.bool,

4
components/button/demo/basic.md
View File

@ -16,6 +16,10 @@ There are `primary` button, `default` button, `dashed` button and `danger` butto
<a-button>Default</a-button>
<a-button type="dashed">Dashed</a-button>
<a-button type="danger">Danger</a-button>
<a-config-provider :autoInsertSpaceInButton="false">
<a-button type="primary">按钮</a-button>
</a-config-provider>
<a-button type="primary">按钮</a-button>
</div>
</template>
```

3
components/button/demo/size.md
View File

@ -25,6 +25,7 @@ If a large or small button is desired, set the `size` property to either `large`
<a-button type="danger" :size="size">Danger</a-button>
<br />
<a-button type="primary" shape="circle" icon="download" :size="size" />
<a-button type="primary" shape="round" icon="download" :size="size">Download</a-button>
<a-button type="primary" icon="download" :size="size">Download</a-button>
<br />
<a-button-group :size="size">
@ -51,4 +52,4 @@ export default {
},
}
</script>
```
```

9
components/button/index.en-US.md
View File

@ -9,7 +9,7 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
| htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |
| icon | set the icon of button, see: Icon component | string | - |
| loading | set the loading status of button | boolean \| { delay: number } | false |
| shape | can be set to `circle` or omitted | string | - |
| shape | can be set to `circle`, `round` or omitted | string | - |
| size | can be set to `small` `large` or omitted | string | `default` |
| type | can be set to `primary` `ghost` `dashed` `danger`(added in 2.7) or omitted (meaning `default`) | string | `default` |
| block | option to fit button width to its parent width | boolean | `false` |
@ -20,4 +20,11 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
| click | set the handler to handle `click` event | (event) => void |
`<Button>Hello world!</Button>` will be rendered into `<button><span>Hello world!</span></button>`, and all the properties which are not listed above will be transferred to the `<button>` tag.
`<Button href="http://example.com">Hello world!</Button>` will be rendered into `<a href="http://example.com"><span>Hello world!</span></a>`.
## FAQ
### How to remove space between 2 chinese characters
Use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`.

11
components/button/index.zh-CN.md
View File

@ -1,6 +1,6 @@
## API
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
按钮的属性说明如下：
@ -11,7 +11,7 @@
| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |
| icon | 设置按钮的图标类型 | string | - |
| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |
| shape | 设置按钮形状，可选值为 `circle` 或者不设 | string | - |
| shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - |
| size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` |
| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` | string | - |
| block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` |
@ -22,4 +22,11 @@
| click | 点击按钮时的回调 | (event) => void |
`<a-button>Hello world!</a-button>` 最终会被渲染为 `<button><span>Hello world!</span></button>`，并且除了上表中的属性，其它属性都会直接传到原生 button 上。
`<Button href="http://example.com">Hello world!</Button>` 则会渲染为 `<a href="http://example.com"><span>Hello world!</span></a>`。
## FAQ
### 如何移除 2 个汉字之间的空格
设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。