ant-design-vue/components/tag/CheckableTag.tsx
2020-10-10 18:16:28 +08:00

46 lines
1.3 KiB
Vue

import { inject, defineComponent, PropType } from 'vue';
import classNames from '../_util/classNames';
import { defaultConfigProvider } from '../config-provider';
import PropTypes from '../_util/vue-types';
const CheckableTag = defineComponent({
name: 'ACheckableTag',
props: {
prefixCls: PropTypes.string,
checked: PropTypes.looseBool,
onChange: {
type: Function as PropType<(checked: boolean) => void>,
},
onClick: {
type: Function as PropType<(e: MouseEvent) => void>,
},
},
emits: ['update:checked', 'change', 'click'],
setup(props, { slots, emit }) {
const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
const handleClick = (e: MouseEvent) => {
const { checked } = props;
emit('update:checked', !checked);
emit('change', !checked);
emit('click', e);
};
return () => {
const { checked, prefixCls: customizePrefixCls } = props;
const prefixCls = getPrefixCls('tag', customizePrefixCls);
const cls = classNames(prefixCls, {
[`${prefixCls}-checkable`]: true,
[`${prefixCls}-checkable-checked`]: checked,
});
return (
<span class={cls} onClick={handleClick}>
{slots.default?.()}
</span>
);
};
},
});
export default CheckableTag;