Storybook 不支持 vuetify 的 v-calendar答案

【问题标题】：Storybook does not support v-calendar of vuetifyStorybook 不支持 vuetify 的 v-calendar
【发布时间】：2021-02-12 18:25:50
【问题描述】：

我尝试在 Storybook 中添加 vuetify 中的 v-calendar 组件，如下图所示，但它无法加载并出现下图中给出的错误。不支持吗？ v-date-picker 也是如此。

包： "@storybook/vue": ">=5.3.0", "vue": "^2.6.11", "vuetify": "^2.2.11",

//calendar.vue
<template>
  <div>
    <v-calendar color="primary"
      ref="calendar"
        v-model="focus"
        type="category"
        category-show-all
        :categories="categories"
        :events="events">
    </v-calendar>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import Vuetify from "vuetify";
Vue.use(Vuetify);

@Component
export default class Calendar extends Vue {
  @Prop({default:()=>{ return []}}) detectionsData!: [];

  focus= '';
  events= [];
  categories= ['John Smith', 'Tori Walker'];  
}
</script>

// calendar.stories.ts
import myCalendar from "../components/Calendar.vue";
import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/dist/vuetify.min.css';

export default {
    title: 'Calendar-View',
    component: myCalendar,
};
const Template = (args: any, { argTypes }: any) => ({
    props: Object.keys(argTypes),
    components: { myCalendar },
    template: '<my-calendar/>',
});

Template.args = {}

export const Default = Template.bind({});
Default.args = ({})

【问题讨论】：

当我在正常的“npm run serve”中检查控制台上的 $veitify 时，它会正确显示“lang”属性。但是当我使用“npm run storybook”在故事书中运行它时，“$vuetify”变量的“lang”属性丢失了。我认为这个问题可能是因为 webpack 中的导入实现。任何线索任何人？？？

标签： typescript vuejs2 vuetify.js storybook vcalendar

【解决方案1】：

为日历组件提供以下属性后，此问题已解决

locale="en"

【讨论】：