ant-design-vue/components/tabs/src/TabNavList/AddButton.tsx

49 lines
1.2 KiB
Vue

import type { PropType } from 'vue';
import { defineComponent, ref } from 'vue';
import type { EditableConfig, TabsLocale } from '../interface';
export interface AddButtonProps {
prefixCls: string;
editable?: EditableConfig;
locale?: TabsLocale;
}
export default defineComponent({
name: 'AddButton',
inheritAttrs: false,
props: {
prefixCls: String,
editable: { type: Object as PropType<EditableConfig> },
locale: { type: Object as PropType<TabsLocale>, default: undefined as TabsLocale },
},
setup(props, { expose, attrs }) {
const domRef = ref();
expose({
domRef,
});
return () => {
const { prefixCls, editable, locale } = props;
if (!editable || editable.showAdd === false) {
return null;
}
return (
<button
ref={domRef}
type="button"
class={`${prefixCls}-nav-add`}
style={attrs.style}
aria-label={locale?.addAriaLabel || 'Add tab'}
onClick={event => {
editable.onEdit('add', {
event,
});
}}
>
{editable.addIcon ? editable.addIcon() : '+'}
</button>
);
};
},
});