Svelte原生插槽在Storybook中的使用方法咨询

一、处理默认插槽 #

针对你的Button.svelte组件，要在Storybook里替换默认插槽内容，直接在组件标签内写入自定义内容即可，两种常用写法如下：

写法1：JS格式stories文件（.stories.js/.stories.ts） #

import Button from './Button.svelte';

export default {
  title: 'UI/Button',
  component: Button,
};

// 替换默认插槽为自定义文本
export const CustomDefaultText = () => ({
  Component: Button,
  render: () => `<Button>提交</Button>`,
});

// 传入图标+文本的复杂内容
export const WithIcon = () => ({
  Component: Button,
  render: () => `
    <Button>
      <svg width="16" height="16" viewBox="0 0 16 16">
        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
      </svg>
      保存
    </Button>
  `,
});

写法2：Svelte格式stories文件（.stories.svelte） #

<script>
  import Button from './Button.svelte';
</script>

<Button>
  <span class="btn-text">删除</span>
</Button>

二、处理命名插槽 #

针对带有命名插槽的Button2.svelte，需要用slot属性指定内容对应的插槽名称，示例如下：

写法1：JS格式stories文件 #

import Button2 from './Button2.svelte';

export default {
  title: 'UI/Button2',
  component: Button2,
};

// 同时替换默认插槽和after命名插槽
export const CustomBothSlots = () => ({
  Component: Button2,
  render: () => `
    <Button2>
      自定义按钮文本
      <span slot="after">
        <svg width="14" height="14" viewBox="0 0 14 14">
          <path d="M7 0L0 7l7 7 7-7-7-7zM7 12L3 7l4-4 4 4-4 5z"/>
        </svg>
      </span>
    </Button2>
  `,
});

// 仅替换命名插槽，保留默认插槽内容
export const OnlyCustomAfterSlot = () => ({
  Component: Button2,
  render: () => `
    <Button2>
      <span slot="after">→</span>
    </Button2>
  `,
});

写法2：Svelte格式stories文件 #

<script>
  import Button2 from './Button2.svelte';
</script>

<Button2>
  编辑
  <div slot="after">
    <span class="badge">new</span>
  </div>
</Button2>

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