Storybook + Vue3 - 尝试使用自定义指令时出错

Question

尝试对 Vue3 和故事书使用自定义指令时，出现此错误：

我不明白这个问题，甚至不知道从哪里开始看。我对 Vue 和故事书还是很陌生。我创建了一个小的测试指令，只是为了确保它与更复杂的指令无关：

app.directive('red-bg', {
  beforeMount: (element, binding) => {
    element.style.backgroundColor = "red";
  }
});

并应用它： <div class="wmr-select relative" ref="selectRef" v-red-bg>

它在项目的正常应用程序部分工作（如您在红色 bg 中看到的那样）：

但在故事书中，我在第一张图片中发现了错误。我还没有找到任何答案。

希望有人能飞来救我。谢谢

Answer 1

由于 Storybook 使用另一个文件来初始化您的应用程序，因此您需要在两个文件中定义指令。

这在文档的 configuring storybook 部分进行了解释。

在我的例子中，我在 main.js 文件中定义了指令，但我还必须在 .storybook 文件夹的 preview.js 文件中定义它。

作为参考，这是我的 .storybook/preview.js 样子：

import { app } from "@storybook/vue3";
/* all the other import needed for my project **/
import store from "@/store";
/** ...  */

export const parameters = {
   /** Some parameters specifics to the plugins of storybook. **/
   /** For example, when using themes. **/
};

/** App specific initialization, ex defining locale  */
const i18n = createI18n({
  locale: "en",
  fallbackLocale: "en",
  messages: myLocaleMessageLoader()
});

/** registering directives  */
app.directive("my-custom-directive", myCustomDirectiveHandler);

app
  .use(i18n)
  .use(store)
  /** all the other `.use` that my app need.*/

请注意导入中storybook own app的用法。

在 .storybook/preview.js 中添加指令后，我成功地在我的故事中使用了它。

Storybook + Vue3 - 尝试使用自定义指令时出错

Storybook + Vue3 - Error when trying to use custom directives

storybook

vue-directives

vuejs3