ant-design-vue/components/tag/Tag.jsx

119 lines
2.8 KiB
Vue
Raw Normal View History

2019-01-12 11:33:27 +08:00
import PropTypes from '../_util/vue-types';
import Icon from '../icon';
import getTransitionProps from '../_util/getTransitionProps';
import omit from 'omit.js';
import Wave from '../_util/wave';
import { hasProp } from '../_util/props-util';
import BaseMixin from '../_util/BaseMixin';
2017-11-09 15:58:53 +08:00
export default {
2018-04-08 21:17:20 +08:00
name: 'ATag',
2018-09-16 21:36:22 +08:00
mixins: [BaseMixin],
2019-02-01 17:23:00 +08:00
model: {
prop: 'visible',
event: 'close.visible',
},
2017-11-09 15:58:53 +08:00
props: {
2018-09-16 21:36:22 +08:00
prefixCls: PropTypes.string.def('ant-tag'),
color: PropTypes.string,
2019-01-08 13:17:46 +08:00
closable: PropTypes.bool.def(false),
2018-09-16 21:36:22 +08:00
visible: PropTypes.bool,
2018-09-17 10:20:23 +08:00
afterClose: PropTypes.func,
2018-09-16 21:36:22 +08:00
},
2019-01-12 11:33:27 +08:00
data() {
let _visible = true;
2019-01-08 13:17:46 +08:00
if (hasProp(this, 'visible')) {
2019-01-12 11:33:27 +08:00
_visible = this.visible;
2018-09-16 21:36:22 +08:00
}
2019-01-08 13:17:46 +08:00
return {
_visible,
2019-01-12 11:33:27 +08:00
};
2017-11-09 15:58:53 +08:00
},
2018-09-16 21:36:22 +08:00
watch: {
2019-01-12 11:33:27 +08:00
visible(val) {
2018-09-16 21:36:22 +08:00
this.setState({
_visible: val,
2019-01-12 11:33:27 +08:00
});
2017-11-09 15:58:53 +08:00
},
2018-09-16 21:36:22 +08:00
},
2017-11-09 15:58:53 +08:00
methods: {
2019-01-12 11:33:27 +08:00
setVisible(visible, e) {
this.$emit('close', e);
this.$emit('close.visible', false);
2019-01-08 13:17:46 +08:00
if (e.defaultPrevented) {
2019-01-12 11:33:27 +08:00
return;
2018-09-16 21:36:22 +08:00
}
2019-01-08 13:17:46 +08:00
if (!hasProp(this, 'visible')) {
2019-01-12 11:33:27 +08:00
this.setState({ _visible: visible });
2017-11-09 15:58:53 +08:00
}
2018-09-16 21:36:22 +08:00
},
2019-01-12 11:33:27 +08:00
handleIconClick(e) {
this.setVisible(false, e);
2018-09-16 21:36:22 +08:00
},
2019-01-12 11:33:27 +08:00
animationEnd() {
const afterClose = this.afterClose;
2019-01-08 13:17:46 +08:00
if (afterClose) {
2019-01-12 11:33:27 +08:00
afterClose();
2018-09-16 21:36:22 +08:00
}
},
2019-01-12 11:33:27 +08:00
isPresetColor(color) {
if (!color) {
return false;
}
return /^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$/.test(
color,
);
2017-11-09 15:58:53 +08:00
},
2019-01-12 11:33:27 +08:00
getTagStyle() {
const { color } = this.$props;
const isPresetColor = this.isPresetColor(color);
2019-01-08 13:17:46 +08:00
return {
backgroundColor: color && !isPresetColor ? color : undefined,
2019-01-12 11:33:27 +08:00
};
2019-01-08 13:17:46 +08:00
},
2019-01-12 11:33:27 +08:00
getTagClassName() {
const { prefixCls, color } = this.$props;
const isPresetColor = this.isPresetColor(color);
2019-01-08 13:17:46 +08:00
return {
[prefixCls]: true,
[`${prefixCls}-${color}`]: isPresetColor,
[`${prefixCls}-has-color`]: color && !isPresetColor,
2019-01-12 11:33:27 +08:00
};
2019-01-08 13:17:46 +08:00
},
2019-01-12 11:33:27 +08:00
renderCloseIcon() {
const { closable } = this.$props;
return closable ? <Icon type="close" onClick={this.handleIconClick} /> : null;
2019-01-08 13:17:46 +08:00
},
2017-11-09 15:58:53 +08:00
},
2018-09-16 21:36:22 +08:00
2019-01-12 11:33:27 +08:00
render() {
const { prefixCls } = this.$props;
const { _visible: visible } = this.$data;
2019-01-08 13:17:46 +08:00
const tag = (
2018-09-16 21:36:22 +08:00
<div
2019-01-08 13:17:46 +08:00
v-show={visible}
2018-09-16 21:36:22 +08:00
{...{ on: omit(this.$listeners, ['close']) }}
2019-01-08 13:17:46 +08:00
class={this.getTagClassName()}
style={this.getTagStyle()}
2018-09-16 21:36:22 +08:00
>
{this.$slots.default}
2019-01-08 13:17:46 +08:00
{this.renderCloseIcon()}
2018-09-16 21:36:22 +08:00
</div>
2019-01-12 11:33:27 +08:00
);
2018-09-17 10:20:23 +08:00
const transitionProps = getTransitionProps(`${prefixCls}-zoom`, {
2019-01-08 13:17:46 +08:00
appear: false,
afterLeave: this.animationEnd,
2019-01-12 11:33:27 +08:00
});
2018-02-05 19:12:41 +08:00
return (
2018-09-16 21:36:22 +08:00
<Wave>
2019-01-08 13:17:46 +08:00
<transition {...transitionProps}>{tag}</transition>
2018-09-16 21:36:22 +08:00
</Wave>
2019-01-12 11:33:27 +08:00
);
2018-02-05 19:12:41 +08:00
},
2019-01-12 11:33:27 +08:00
};