Storybook 不支持 vuetify 的 v-calendar

Posted 2023-02-19

【中文标题】Storybook 不支持 vuetify 的 v-calendar

【英文标题】：Storybook does not support v-calendar of vuetify

【发布时间】：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 中的导入实现。任何线索任何人？？？

【参考方案1】：

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

locale="en"