Storybook中手动设置单个组件画布高度：画布过短致组件截断的问题求助

我之前也碰到过一模一样的情况！给组件加position: absolute后，元素脱离了文档流，Storybook的画布就没法自动计算出正确的高度，直接缩成最小导致组件被截断。之前我试过给组件本身加height没用，后来用这几个方法解决了，给你参考：

• 直接给单个Story配置画布高度（最推荐）
  Storybook支持给单个story单独设置参数，不用全局改动。你可以在导出的story对象里加parameters配置，直接指定画布的高度：

  export const Default = Template.bind({});
  Default.args = {
    // 你的组件参数
  };
  Default.parameters = {
    canvas: {
      height: '400px' // 这里设置你需要的高度
    }
  };
  

  如果你想让画布自适应但有最小高度，也可以用layout参数试试'padded'或者'fullscreen'，不过直接指定高度最精准。

• 给组件套一个占位容器
  因为绝对定位的元素不占文档流空间，你可以给组件外面包一个带最小高度的容器，让容器在文档流里占住空间，这样Storybook的画布就会跟着容器的高度走：

  template: '<div style="min-height: 400px; position: relative"><teaser style="position: absolute" v-bind="args" :image="args.image"/></div>',
  

  这里给容器加position: relative还能让组件的绝对定位相对于这个容器，避免组件跑到画布外面去，一举两得。

• 检查组件的绝对定位逻辑
  如果你不需要组件完全脱离文档流，说不定可以换成position: relative或者调整布局逻辑，这样画布就能自动识别组件高度了，不过这个得看你的组件需求来定。

之前你给组件加height没用，就是因为绝对定位让组件脱离了文档流，Storybook的画布只会计算文档流内元素的高度，所以要么直接给画布设高度，要么给文档流里的容器设高度，这两个方法亲测有效！

备注：内容来源于stack exchange，提问作者J_R