故事书代码预览不显示 VueJS 中插槽的使用情况

Posted 2023-02-19

【中文标题】故事书代码预览不显示 VueJS 中插槽的使用情况

【英文标题】：storybook code preview doesn't show the usage of slots in VueJS

【发布时间】：2021-06-27 20:37:21

【问题描述】：

我正在使用 Storybook 创建有关我在项目中使用的组件的文档。其中一个组件使用了 VueJS 中称为 Slots 的功能。在下面的 sn-p 中，您可以看到使用插槽的故事。

export const IconText = (args,  argTypes ) => (
  props: Object.keys(argTypes),
  components:  Button, IconAdd ,
  template: `
  <Button>
    <template v-slot:text>
      Text
    </template>

    <template v-slot:icon>
      <IconAdd />
    </template>
  </Button>
  `
)

问题是，如果我在Storybook中触摸查看这个Story的代码预览，我只是看到下面的sn-p，我想看看slots的使用情况，你知道我该如何实现?

<template><Button /></template>

【参考方案1】：

我遇到了同样的问题，这是我为使其正常工作所做的。

我知道这不是最漂亮的方法，但这是我找到的唯一方法。

因此，您必须在故事的参数中说明要手动显示的代码，如下所示：

yourStory.parameters = 
  docs: 
    source: 
      code: 'Write code you want to be displayed here',
    ,
  ,
;

欲了解更多信息，请查看：https://storybook.js.org/docs/react/writing-docs/doc-blocks#docspage-1

【参考方案2】：

您可以使用Doc Blocks 并通过调用Source 插件编写自己的自动生成代码sn-p。

示例¹：

import  Source  from '@storybook/addon-docs/blocks'
import dedent from 'ts-dedent'
<Source
  language="jsx"
  code=dedent`
    <Button variant="rectangle" />
  `
/>

¹https://levelup.gitconnected.com/documenting-design-systems-with-storybook-docs-e54b2fa5203

【参考方案3】：

我通过从 $props 变量中删除插槽并简单地将其传递到带有 args.default 的模板（default 是插槽名称）解决了这个问题

export default 
    title: 'Button',
    component: ECBtn,
    parameters,
    argTypes: 
        default: 
            description: "The default Vue slot",
            control: 
                type: 'text',
            ,
            table: 
                category: 'Slots',
                type: 
                    summary: 'html',
                ,
            
        
    

;

const Template = (args,  argTypes ) => (
  props: Object.keys(argTypes),
  components:  
    'ec-btn': ECBtn,
  ,
  template:`
    <ec-btn v-bind="propsWithoutSlot">
      $args.default
    </ec-btn>
  `,
  computed: 
    propsWithoutSlot() 
        const all = this.$props;
        delete all.default
        return all;
    

);

这就是源代码的样子。摆脱 <template> 标记会很好，但至少插槽显示正确！

编辑：我也找到了删除<template> 标签的方法。在preview.js 文件中，您需要可以使用transformSource() 删除模板标签以及您想要在源sn-p 中更改的任何其他内容。删除模板标签后，我使用beautify-js 格式化html缩进。

// preview.js


var beautify_html = require('js-beautify').html;

export const parameters = 
  docs: 
    transformSource: (src) => 
      const string1 = src.substr(0, src.length - 12).substr(10)

      return beautify_html(string1)