Vue 3中如何在插槽组件中保留空白字符？

要保留自定义组件中的空白缩进，核心是确保文本内容的空白格式不被框架或浏览器压缩，以下是几种可行方案：

• 给slot容器添加CSS强制保留空白
  原生<pre>标签默认自带white-space: pre样式，会保留换行和空格。但自定义组件的slot在传递文本时，可能因框架处理丢失空白格式，因此需要给包裹slot的元素显式设置该样式：

  组件代码修改（内联样式版）：

  <pre>
    <code style="white-space: pre;"><slot /></code>
  </pre>
  

  或抽离CSS类（更易维护）：

  .custom-code-block code {
    white-space: pre;
  }
  

  对应组件结构：

  <pre class="custom-code-block">
    <code><slot /></code>
  </pre>
  

• 利用框架特性跳过空白压缩
  如果使用Vue框架，可通过v-pre指令跳过模板对空白的编译处理：

  • 组件内部设置：

    <pre><code v-pre><slot /></code></pre>
    

  • 或使用组件时添加：

    <CustomCodeBlock v-pre>
        test();
    </CustomCodeBlock>
    

• 确保文本直接传递不被转义
  部分框架会对组件文本内容进行空白合并，需确保slot接收的是原始文本。比如React中，直接给<code>元素设置style={{ whiteSpace: 'pre' }}，即可让内容保留原始缩进和换行。

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