Vue 3 删除内联块元素之间的 white-space

Question

Vue 3 删除了内联块元素之间的白色-space。这意味着在我可以安全地从版本 2 升级之前，我必须返回浏览我的很多站点并更新 CSS。有没有办法关闭它？

示例如下：

<ol>
    <li style="display: inline-block"><a href="#">A</a> &raquo; </li>
    <li style="display: inline-block"><a href="#">B</a></li>
</ol>

https://jsfiddle.net/27vwLn6u/

下面是 Vue 2 中的相同示例：

https://jsfiddle.net/3d0jcnmf/

Answer 1

看起来您已经找到答案了 https://github.com/vuejs/vue-next/issues/2431#issuecomment-712451346

V3自动凝白space.

您可以使用单行绕过它。

<div id="app">
  <ol>
      <li style="display: inline"><a href="#">A</a> &raquo; </li>
      <li style="display: inline"><a href="#">B</a></li>
  </ol>
  <ol>
      <li style="display: inline-block"><a href="#">A</a> &raquo; </li> <li style="display: inline-block"><a href="#">B</a></li>
  </ol>
  {{foo}}
</div>

我正在查看代码，看起来 pre 标记的处理方式不同，但我还没有找到将 isPreTag 传递给组件的方法。

Answer 2

从 Vue 3.1.0 开始支持此功能。有关详细信息，请参阅 https://github.com/vuejs/vue-next/pull/1600。

基本上现在您需要在创建应用程序时添加以下内容：

app.config.compilerOptions.whitespace = 'preserve';

这是更新后的示例：

https://jsfiddle.net/bscz2306/

Vue 3 删除内联块元素之间的 white-space

Vue 3 removes white-space between inline-block elements

vuejs3