如何创建验证超集以扩展基本功能

Question

我正在尝试创建一个基于插件的组件库，以使用 veutify 跨多个产品线提供一致性。但是，安装库并添加组件我得到了几个关于深色主题的错误。

组件库和目标产品线都通过 vue cli 安装了 veutfy。

<template>
     <div class="module-wrap">
        <v-card v-bind="$attrs" v-on="$listeners" :class="`dashboard-module units`">
            <v-toolbar flat dense :color="color">
                <v-toolbar-title>{{title}}</v-toolbar-title>
                <v-spacer></v-spacer>
                <v-menu v-bind="$attrs" v-on="$listeners"  class="menu" offset-y>
                    <template v-slot:activator="{ on }">
                        <v-btn class="menu-opener" icon v-on="on">
                            <font-awesome-icon icon="ellipsis-h"></font-awesome-icon>
                        </v-btn>
                    </template>
                    <v-list>
                        <v-list-tile class="tooltip" @click="dialog = true">
                            <v-list-tile-avatar>
                                <font-awesome-icon icon="info"/>
                            </v-list-tile-avatar>
                            <v-list-tile-content>
                                <v-list-tile-title>Information</v-list-tile-title>
                            </v-list-tile-content>
                        </v-list-tile>
                        <v-list-tile class="favorite" @click="$emit('favorite')">
                            <v-list-tile-avatar>
                                <font-awesome-icon icon="star"/>
                            </v-list-tile-avatar>
                            <v-list-tile-content>
                                <v-list-tile-title>Save To Favorites</v-list-tile-title>
                            </v-list-tile-content>
                        </v-list-tile>
                        <v-list-tile class="export" v-if="!disableExport" @click="$emit('export')">
                            <v-list-tile-avatar>
                                <font-awesome-icon icon="file-export"/> 
                            </v-list-tile-avatar>
                            <v-list-tile-content>
                                <v-list-tile-title>Export</v-list-tile-title>
                            </v-list-tile-content>
                        </v-list-tile>
                    </v-list>
                </v-menu>
            </v-toolbar>
            <div :class="`content`">
                <slot></slot>
            </div>
            <v-card-text>
                <slot name="card-text"></slot>
            </v-card-text>
            <v-dialog v-model="dialog" width="500">
                <v-card>
                    <v-card-title>
                        <div class="headline">{{title}}</div>
                    </v-card-title>
                    <v-card-text>
                        <slot name="tooltip"></slot>
                    </v-card-text>

                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn @click="dialog = false" flat color="primary">Ok</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </v-card>
    </div>
</template>

<script lang="ts">

export default {
    // props:['color', 'module', 'title'],
    props: {
        color:String,
        title:String,
        disableExport:Boolean
    },

    data() {
        return {
            dialog:false
        }
    }
}
</script>

<style scoped>

.dashboard-module {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.content {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
}

</style>

^ 库中的组件

webpack-internal:///./node_modules/dashboard-components/node_modules/vue/dist/vue.runtime.esm.js:620 [Vue warn]: Error in render: "TypeError: Cannot read property 'dark' of undefined"

found in

---> <VMenu>
       <TDashboardModule>
         <App> at src/App.vue
           <Root>

TypeError: Cannot read property 'dark' of undefined

[Vue warn]: Error in getter for watcher "isDark": "TypeError: Cannot read property 'dark' of undefined"

found in

---> <ThemeProvider>
       <VDialog>
         <TDashboardModule>
           <App> at src/App.vue
             <Root>

^ 抛出的错误

vuetify 版本 1.5.14

Answer 1

您是否设置了主题颜色？在哪里？万一否定，按照documentation：

Vuetify 支持 Material Design 的明暗变体 规格。此名称从根应用程序组件 v-app 开始 并且得到大多数组件的支持。默认情况下，您的 应用程序将使用浅色主题，但这很容易 通过添加 dark 属性覆盖。

<v-app dark>

如果您不想将所有内容都设置为一种颜色，则可以将名为 dark 的道具传递给组件，以使它们使用深色主题：

<v-menu dark>

Documentation about menu component