如何为 vuetify 属性（例如“variant”）导入 typescript 类型？

Question

我正在基于 vuetify 3 中的 v-btn 构建一个 vue 组件。我想要一个变体属性，该属性会传递到我使用的 v-btn 组件。我想正确指定类型。目前我的类型定义是

 variant?: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain"> | undefined,

有什么方法可以将其作为 v-btn 中的命名类型导入吗？我不喜欢将变体列表复制到我的代码库中的想法。我想要类似的东西

variant?: Variant | undefined

还有更多。

这是我正在尝试构建的组件：

<template>
    <v-tooltip location="bottom">
        <template v-slot:activator="{ props }">
            <v-btn v-bind="props" icon class="icon-right" @click="$emit('onClick')" :variant="$props.variant" :density="$props.density">
            <v-icon> {{ $props.icon }} </v-icon>
            </v-btn>
        </template>
        <span> {{ $props.title }} </span>
    </v-tooltip>
</template>
  
<style scoped lang="scss">
.icon-right {
  position: absolute;
  right: 0;
  margin-bottom: 2rem;
}
</style>

<script lang="ts" setup>
const props = defineProps<{
  title: string,
  icon: string,
  variant?: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain"> | undefined,
  density?: null | 'default' | 'comfortable' | 'compact',
}>();
const emit = defineEmits<{
  onClick: []
}>();
</script>

Answer 1

您可以使用

import type { VBtn } from "vuetify/components"

导入类型

import type { VBtn } from "vuetify/components";

type TVariant = VBtn["$props"]['variant'];
type TDensity = VBtn["$props"]['density'];
const props = defineProps<{
  title: string;
  icon: string;
  variant?: TVariant;
  density?: TDensity;
}>();