如何在Vue 3插槽內容中取得換行符(\n)?
P粉391677921
P粉391677921 2024-03-26 12:42:18
0
1
496

我正在嘗試將 Vue 2 元件遷移到 Vue 3。這個想法就像 Vue 的“ln2br”(實際上是“ln2p”)。

所以...

<my-linebreaker>
  This is the line 1.
  This is the line 2.
  This is the line 3.
</my-linebreaker>

應該要渲染:

<div>
  <p>  This is the line 1.</p>
  <p>  This is the line 2.</p>
  <p>  This is the line 3.</p>
</div>

這是我的工作元件 MyLinebreaker.vueVue 2程式碼:

<template>
  <div>
    <p v-for="(line, index) in lines" :key="index">{{ line }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    lines () {
      const slot = this.$slots.default
      const text = slot ? slot[0].text : ''

      return text.split('\n')
    }
  }
}
</script>

Slots API 在 Vue 3 中發生了變化,因此我嘗試重寫我的 lines 計算結果:

<script>
export default {
  computed: {
    lines () {
      const slot = this.$slots.default
      const text = slot ? slot()[0].children : ''

      return text.split('\n')
    }
  }
}
</script>

但它渲染錯誤(所有行都在一行中),因為 .children 不包含 \n 字元。

<div>
  <p>  This is the line 1. This is the line 2. This is the line 3.</p>
</div>

那麼,如何在Vue 3中取得 \n char 的文字內容?

P粉391677921
P粉391677921

全部回覆(1)
P粉752479467

在 Vue 中將 compilerOptions.whitespace 改為 preserve,如此處相關。

app.config.compilerOptions.whitespace = 'preserve'

有關更多詳細信息,請參閱Vue 3 文件:https://v3.vuejs.org/api/application-config.html#compileroptions-whitespace

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板