Vue: `whitespace:condense`を使用すると、すべての&nbsps;は、意味のあるものであっても、スペースに変換されます

作成日 2020年01月29日  ·  5コメント  ·  ソース: vuejs/vue

バージョン

2.6.11

複製リンク

https://gist.github.com/aimozg/c073eea5a55062e3dcd8f887a8567807

再現する手順

Nodeでexample.jsを実行します。

代替手順/詳細な説明:

  1. whitespace: 'condense'してVueテンプレートコンパイラをセットアップします。 (vue-cliのデフォルトです)。
  2. &nbsp;エンティティを使用してテンプレートをレンダリングします(例: <p>a&nbsp;b</p>
  3. テンプレートで実際の改行なしスペース文字を検査します

何が期待されますか?

&nbsp;エンティティはノーブレークスペース文字としてレンダリングされます。 example.jsの出力には次のものが含まれている必要があります

---- whitespace: condense
// code
NBSP FOUND

実際に何が起こっているのですか?

&nbsp;エンティティはプレーンスペースとしてレンダリングされ、example.jsの出力には次のものが含まれます

---- whitespace: condense
// code
NBSP NOT FOUND

空白は、次のコンパイラコードによって削除されます。

if (!inPre && whitespaceOption === 'condense') {
  // condense consecutive whitespaces into single space
  text = text.replace(whitespaceRE, ' ')
}

"&nbsp;"は、以前のエンティティデコーダーで"\xA0"置き換えられました。

関連する問題はhttps://github.com/vuejs/vue/issues/10485です

提案

/[ \t\r\n]+/gように、より狭いwhitespaceRE正規表現。

bug compiler has PR

最も参考になるコメント

一般的に、壊れないスペースに触れてはいけませんか? これは、テンプレートで使用する場合に個人的に期待することです。 それはまたあなたが言及した問題を修正するでしょう

全てのコメント5件

一般的に、壊れないスペースに触れてはいけませんか? これは、テンプレートで使用する場合に個人的に期待することです。 それはまたあなたが言及した問題を修正するでしょう

空白を使用してVueテンプレートコンパイラを設定します: 'condense'。 (vue-cliのデフォルトです)

待って、私は混乱しています。 condense本当にデフォルトですか? preserveが実際にはデフォルトであると主張するものが複数あります。

壊れないスペースが機能していない理由を理解するのに苦労してきました。 私は保存を強制しようとしましたが、それから見ました:

デフォルトはpreserveとエヴァンは言っていますhttps://github.com/vuejs/vue/issues/9208#issuecomment -450012518

そして、そのステートメントをエコーするコンパイラオプションのドキュメントhttps://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#options

@aimozgcondenseが実際にはデフォルトであると言っているのを見て、私は先に進んで手動でpreserveを設定しました。 すべてが正常に戻りました!

ドキュメント/実装は間違っていますか?

いずれにせよ、なぜ凝縮はnbspを排除するのでしょうか? 非常に予期しない動作。 私は彼らが触れられるべきではないことに同意します。

下位互換性を確保するためにVueコアでは空白が保持されますが、最新バージョンのVue CLIでは、デフォルトでcondenseされています。

エスケープされたタブと同じ&#9;

コードの表示が非常に難しくなります

これがマージされるのを待っています。
現在の回避策
使用する

{{'\xa0'}}

の代わりに

&nbsp;
このページは役に立ちましたか?
0 / 5 - 0 評価