Question

我的问题是在组件在故事书中呈现后，在之后调用方法。它是关于显示模态的，但是它可以应用于任何vue组件。
在创建组件以使其可见之后，我需要在此处调用方法showDialog(true) 。

Answer 1

这是将Typescript与component story format of storybook (version 5.2+)结合使用的棘手解决方案：

import Vue from 'vue';

// ... some imports and global setup 

export const normalError = () => ({
  components: { 'error-modal': ErrorModal },
  template: `<error-modal @hook:mounted='externalMount'/>`, // bind the custom method on mounted hook
  methods: {                           // bind the new method to the component
    async externalMount() {            // don't use an arrow function or this will have wrong scope
      const anyThis: any = this;
      const vm = anyThis.$children[0]; // target the component ErrorModal
      await Vue.nextTick();            // wait that mounted() finished
      vm.showDialog(true);             // finally show the modal / call the method !
    }
  }
});

如果您找到更好的产品，我将很高兴知道并支持它。

Answer 2

这是我们项目中使用 storybook 6.1 的示例。它在组件挂载

后执行代码

对于这个 Vue(x) 组件

<Preview>
  <Story name="The equipment">
  {
    {
      components: { EquipmentView },
      template: `<EquipmentView />`,
      mounted () {
        this.$store.commit('equipmentStore/setSelectedEquipment', {
          equipmentId: 'CONT100A',
          equipmentName: 'Container 100L A',
        });
      }
    }
  }
  </Story>
</Preview>

我更希望故事书中的打字稿支持（也许有人可以为此添加答案）。

在故事书中渲染后，如何在vue组件上调用方法？

2 个答案: