diff --git a/docs/components/tabs.md b/docs/components/tabs.md index 8fa5c33..5d6c20b 100644 --- a/docs/components/tabs.md +++ b/docs/components/tabs.md @@ -127,3 +127,32 @@ defineProps({ }, }) ``` + +## Tab pane interaction + +You can add `@click:pane` to Tabs component to intercept click on tab pane. +```vue + + +``` \ No newline at end of file diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue index ce49979..c958e3a 100644 --- a/src/components/Tabs/Tabs.vue +++ b/src/components/Tabs/Tabs.vue @@ -9,6 +9,7 @@ :name="item.props?.name" :disabled="item.props?.disabled" :title="item.props?.title" + @click="emitClick" /> @@ -46,7 +47,7 @@ const props = defineProps({ }, }) -const emit = defineEmits(['update:modelValue']) +const emit = defineEmits(['update:modelValue', 'click:pane']) const { ulClasses, divClasses } = useTabsClasses(props) @@ -71,11 +72,14 @@ const modelValueRef = computed({ provide(TAB_ACTIVE_NAME_INJECTION_KEY, modelValueRef) provide(TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY, toRef(props, 'directive')) - const onActivate = (value: string) => { modelValueRef.value = value } +function emitClick(): void { + emit('click:pane') +} + provide(TAB_ACTIVATE_INJECTION_KEY, onActivate)