TypeScript - Storybook + Vue3 الطرق المكشوفة في `defineExpose` غير مرئية تلقائياً في argTable
لدي CustomInput.vue هكذا
<!-- components/input/CustomInput.vue -->
<template>
<div><!-- some html... --></div>
</template>
<script setup lang="ts">
...
function reset(): void {
// some reset action...
}
defineExpose({
reset
})
</script>
وأنا أصدر المكون بهذه الطريقة.
// components/input/index.ts
import { default as CustomInput } from './CustomInput.vue'
type CustomInput = InstanceType<typeof CustomInput>
export { CustomInput }
حتى أتمكن من إظهار أن نوع طريقة reset هو () => void في مرجع CustonInput.
...
<script setup lang="ts">
...
const inputRef = ref<CustomInput>()
const fn = () => {
inputRef.value?.reset()
}
</script>
لكن في Storybook لا أستطيع رؤية أي طريقة expose.
هل يجب علي كتابة طريقة expose في argTable بشكل منفصل؟
هذا هو رمز قصص كتابي القصصي.
import type { Meta, StoryObj } from '@storybook/vue3'
import { CustomInput } from '../components/input'
const meta = {
title: 'Components/CustomInput',
component: CustomInput,
tags: ['autodocs'],
} satisfies Meta<CustomInput>
export default meta
type Story = StoryObj<typeof meta>
أعلم أن هناك طريقة للكتابة يدويًا في argTable، لكنني أتمنى لو تم إنشاؤه تلقائيًا.