ant-design-vue/components/tag/CheckableTag.tsx

51 lines
1.4 KiB
Vue
Raw Normal View History

import type { ExtractPropTypes, PropType } from 'vue';
2021-06-26 01:35:40 +00:00
import { defineComponent, computed } from 'vue';
2020-09-23 09:51:02 +00:00
import classNames from '../_util/classNames';
2021-06-09 14:50:40 +00:00
import useConfigInject from '../_util/hooks/useConfigInject';
2020-08-23 11:33:01 +00:00
const checkableTagProps = () => ({
prefixCls: String,
checked: { type: Boolean, default: undefined },
onChange: {
type: Function as PropType<(checked: boolean) => void>,
},
onClick: {
type: Function as PropType<(e: MouseEvent) => void>,
},
'onUpdate:checked': Function as PropType<(checked: boolean) => void>,
});
export type CheckableTagProps = Partial<ExtractPropTypes<ReturnType<typeof checkableTagProps>>>;
2020-10-04 14:08:12 +00:00
const CheckableTag = defineComponent({
compatConfig: { MODE: 3 },
2020-10-04 14:08:12 +00:00
name: 'ACheckableTag',
props: checkableTagProps(),
// emits: ['update:checked', 'change', 'click'],
2020-10-04 14:08:12 +00:00
setup(props, { slots, emit }) {
2021-06-09 14:50:40 +00:00
const { prefixCls } = useConfigInject('tag', props);
2020-10-04 14:08:12 +00:00
const handleClick = (e: MouseEvent) => {
const { checked } = props;
emit('update:checked', !checked);
emit('change', !checked);
emit('click', e);
};
2020-08-23 11:33:01 +00:00
2021-06-09 14:50:40 +00:00
const cls = computed(() =>
classNames(prefixCls.value, {
[`${prefixCls.value}-checkable`]: true,
[`${prefixCls.value}-checkable-checked`]: props.checked,
}),
);
2020-08-23 11:33:01 +00:00
2021-06-09 14:50:40 +00:00
return () => {
2020-10-04 14:08:12 +00:00
return (
2021-06-09 14:50:40 +00:00
<span class={cls.value} onClick={handleClick}>
2020-10-04 14:08:12 +00:00
{slots.default?.()}
</span>
);
};
},
});
2020-08-23 11:33:01 +00:00
export default CheckableTag;