Storybook是否不支持Vuetify的v-calendar与v-date-picker组件？

我来帮你排查下这个问题——v-calendar和v-date-picker是完全支持Storybook的，你的问题出在Vuetify的初始化配置和组件写法上，咱们一步步来修复：

1. 移除组件内重复的Vuetify初始化 #

首先看你calendar.vue里的代码，你在组件内执行了Vue.use(Vuetify)，这是错误的。Vue.use()应该只在全局初始化时调用一次，重复调用会导致Vuetify内部状态冲突，直接删掉这两行：

import Vuetify from "vuetify";
Vue.use(Vuetify);

2. 配置Storybook全局Vuetify环境 #

Vuetify的大部分组件（包括日历、日期选择器）需要在v-app组件的上下文中才能正常工作，而且需要全局初始化Vuetify实例。你需要在.storybook/preview.js文件中添加全局配置：

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import '@mdi/font/css/materialdesignicons.css';

// 全局注册Vuetify
Vue.use(Vuetify);

// 创建Vuetify实例
const vuetify = new Vuetify({
  icons: {
    iconfont: 'mdi', // 对应你引入的@mdi/font
  },
});

// 用decorator给所有Story包裹v-app
export const decorators = [
  (story) => ({
    vuetify,
    render: (h) => h('v-app', [h(story())]),
  }),
];

这个配置会让所有Story都运行在Vuetify的v-app容器内，确保组件能获取到必要的样式和上下文。

3. 简化你的Story文件 #

你的calendar.stories.ts里不需要重复引入Vuetify和图标CSS（全局配置已经处理了），简化后的代码如下：

import myCalendar from "../components/Calendar.vue";

export default {
  title: 'Calendar-View',
  component: myCalendar,
};

const Template = (args: any, { argTypes }: any) => ({
  props: Object.keys(argTypes),
  components: { myCalendar },
  template: '<my-calendar v-bind="$props"/>',
});

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

为什么之前会失败？ #

• 组件内重复调用Vue.use(Vuetify)破坏了Vuetify的全局初始化状态
• 没有将组件放在v-app中，Vuetify组件需要这个容器来加载样式和提供功能上下文
• Storybook没有全局注入Vuetify实例，导致组件无法访问Vuetify的内部API

按照上面的步骤调整后，你的v-calendar和v-date-picker应该就能正常加载了。

内容的提问来源于stack exchange，提问作者Yogesh Vadekar