Browse Source

fix: tag click event not trigger

pull/6358/head
tangjinzhou 2 years ago
parent
commit
ad1d6443f2
  1. 19
      components/tag/index.tsx

19
components/tag/index.tsx

@ -7,6 +7,7 @@ import Wave from '../_util/wave';
import type { PresetColorType, PresetStatusColorType } from '../_util/colors'; import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
import { isPresetColor, isPresetStatusColor } from '../_util/colors'; import { isPresetColor, isPresetStatusColor } from '../_util/colors';
import type { LiteralUnion } from '../_util/type'; import type { LiteralUnion } from '../_util/type';
import { eventType } from '../_util/type';
import CheckableTag from './CheckableTag'; import CheckableTag from './CheckableTag';
import useConfigInject from '../config-provider/hooks/useConfigInject'; import useConfigInject from '../config-provider/hooks/useConfigInject';
import warning from '../_util/warning'; import warning from '../_util/warning';
@ -25,9 +26,7 @@ export const tagProps = () => ({
onClose: { onClose: {
type: Function as PropType<(e: MouseEvent) => void>, type: Function as PropType<(e: MouseEvent) => void>,
}, },
onClick: { onClick: eventType<(e: MouseEvent) => void>(),
type: Function as PropType<(e: MouseEvent) => void>,
},
'onUpdate:visible': Function as PropType<(vis: boolean) => void>, 'onUpdate:visible': Function as PropType<(vis: boolean) => void>,
icon: PropTypes.any, icon: PropTypes.any,
}); });
@ -41,7 +40,7 @@ const Tag = defineComponent({
props: tagProps(), props: tagProps(),
// emits: ['update:visible', 'close'], // emits: ['update:visible', 'close'],
slots: ['closeIcon', 'icon'], slots: ['closeIcon', 'icon'],
setup(props: TagProps, { slots, emit, attrs }) { setup(props, { slots, emit, attrs }) {
const { prefixCls, direction } = useConfigInject('tag', props); const { prefixCls, direction } = useConfigInject('tag', props);
const [wrapSSR, hashId] = useStyle(prefixCls); const [wrapSSR, hashId] = useStyle(prefixCls);
@ -89,14 +88,16 @@ const Tag = defineComponent({
); );
const tagClassName = computed(() => const tagClassName = computed(() =>
classNames(prefixCls.value, hashId.value, attrs.class, { classNames(prefixCls.value, hashId.value, {
[`${prefixCls.value}-${props.color}`]: isInternalColor.value, [`${prefixCls.value}-${props.color}`]: isInternalColor.value,
[`${prefixCls.value}-has-color`]: props.color && !isInternalColor.value, [`${prefixCls.value}-has-color`]: props.color && !isInternalColor.value,
[`${prefixCls.value}-hidden`]: !visible.value, [`${prefixCls.value}-hidden`]: !visible.value,
[`${prefixCls.value}-rtl`]: direction.value === 'rtl', [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
}), }),
); );
const handleClick = (e: MouseEvent) => {
emit('click', e);
};
return () => { return () => {
const { const {
icon = slots.icon?.(), icon = slots.icon?.(),
@ -133,12 +134,12 @@ const Tag = defineComponent({
children children
); );
const isNeedWave = 'onClick' in attrs; const isNeedWave = props.onClick !== undefined;
const tagNode = ( const tagNode = (
<span <span
{...attrs} {...attrs}
class={tagClassName.value} onClick={handleClick}
class={[tagClassName.value, attrs.class]}
style={[tagStyle, attrs.style as CSSProperties]} style={[tagStyle, attrs.style as CSSProperties]}
> >
{kids} {kids}

Loading…
Cancel
Save