Question

我正在根据从武库3号楼起伏打造一个假装部件。我想有一种变式财产,转而使用原部分一。我要正确指出这些类型。目前我的类型定义

 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

您可从“地理/成分”进口<代码>进口类型{VBtn }。

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;
}>();

友情链接