ant-design-vue/components/button/button-group.jsx

52 lines
1.2 KiB
Vue
Raw Normal View History

2019-01-12 11:33:27 +08:00
import { filterEmpty } from '../_util/props-util';
2019-09-08 20:16:17 +08:00
import PropTypes from '../_util/vue-types';
2019-03-13 09:38:54 +08:00
import { ConfigConsumerProps } from '../config-provider';
2018-01-29 18:57:20 +08:00
const ButtonGroupProps = {
2019-09-08 20:16:17 +08:00
prefixCls: PropTypes.string,
2018-01-29 18:57:20 +08:00
size: {
2019-01-12 11:33:27 +08:00
validator(value) {
return ['small', 'large', 'default'].includes(value);
2017-10-26 15:18:08 +08:00
},
},
2019-01-12 11:33:27 +08:00
};
export { ButtonGroupProps };
2018-01-29 18:57:20 +08:00
export default {
2018-04-08 21:17:20 +08:00
name: 'AButtonGroup',
2018-01-29 18:57:20 +08:00
props: ButtonGroupProps,
2019-03-13 09:38:54 +08:00
inject: {
2019-09-11 22:35:25 +08:00
configProvider: { default: () => ConfigConsumerProps },
2019-03-13 09:38:54 +08:00
},
2019-01-12 11:33:27 +08:00
data() {
2017-10-26 15:18:08 +08:00
return {
sizeMap: {
large: 'lg',
small: 'sm',
},
2019-01-12 11:33:27 +08:00
};
2017-10-26 15:18:08 +08:00
},
2019-01-12 11:33:27 +08:00
render() {
2019-03-13 09:38:54 +08:00
const { prefixCls: customizePrefixCls, size, sizeMap, $slots } = this;
2019-09-11 22:35:25 +08:00
const getPrefixCls = this.configProvider.getPrefixCls;
2019-03-13 09:38:54 +08:00
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,
};
2019-01-12 11:33:27 +08:00
return <div class={classes}>{filterEmpty($slots.default)}</div>;
2018-01-24 15:39:21 +08:00
},
2019-01-12 11:33:27 +08:00
};