Есть ли способ иметь компонент vue, шаблон которого содержит только текст свойства?

Question

Есть ли способ иметь компонент vue, который имеет область шаблона, которая содержит только простой текст? Проблема, с которой я сталкиваюсь в текущем решении (используя div для обтекания текста), состоит в том, что я рекурсивно объединяю эти компоненты с другими фрагментами текста в одной строке, что часто приводит к переходам на следующую строку родительского контейнера, поскольку на правой стороне фрагмента текста, предшествующего текущему, осталось достаточно места. Следовательно, текстовые абзацы, которые должны выглядеть следующим образом:

Lorem ipsum dolor sit amet, consitteur adipiscing elit. Целое число ie sit amet mauris sed sollicitudin. Curabitur non quam at nibh venenatis facilisis. Целочисленное резюме augu vel quam condimentum ultricies. Маврикий следит за элитой. Donec volutpat velit nulla, vitae fermentum erat aliquet non. Mauris congue nibh eget justo sodales luctus.

В результате выглядят следующим образом:

Lorem ipsum dolor sit amet, consitteur adipiscing elit. Integer molst ie sit amet mauris sed sollicitudin.

Curabitur non quam at nibh venenatis facilisis. Integer vitae augue vel quam condimentum ultricies.

Mauris Последовательность elit vitae sollicitudin auctor. Donec volutpat velit nulla, vitae fermentum erat aliquet non.

Mauris congue nibh eget justo sodales luctus.

Принимая во внимание, что в приведенном примере имеется 5 фрагментов текста, соответственно.

Вот как этот компонент реализован с комментариями внутри тегов шаблона, чтобы конкретизировать мои проблемы:

<template>
  <div>{{element.text}}</div> <!--  This is how I can do it to this point-->
  {{element.text}}            <!--  This is what I would like to do-->
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import TextElement from '@/models/elements/Text'

@Component
export default class TextWrapper extends Vue {
  @Prop() element!: TextElement
}
</script>

<style scoped>
</style>

Answer 1

Vue шаблоны компонентов должны иметь элемент root, существующий в DOM. Обычно используются элементы-оболочки div или span. Это редко является проблемой, потому что элемент root можно стилизовать под макет.

Есть плагин vue -fragment , который обеспечивает функциональность React.Fragment в Vue. Он в основном разворачивает элемент root при монтировании. Поскольку это хак, он может работать не во всех ситуациях, как ожидалось.

Функция визуализации может использоваться для визуализации текстовых узлов с помощью внутреннего метода _v. То, что он использует недокументированный API, говорит о том, что это тоже хак.

Answer 2

Я решил проблему, используя обходной путь для моего начального намерения, передав свойство стиля css шаблону родительского vue -компонента:

<template>
  <div>
    <span v-for="(line, index) in paragraph.lines" :key="index">
      <p v-if="line.length">
        <span v-for="(lineFragment, index) in line" :key="index">
          <component class="inline-component" :element="lineFragment" :is="lineFragment.type"/>
        </span>
      </p>
    </span>
  </div>
</template>

<script lang="ts">
import { Component, Prop } from 'vue-property-decorator'
import ElementHook from '@/views/ElementHook.vue'

@Component
export default class ParagraphWrapper extends ElementHook {
  @Prop() element!: ParagraphElement

}
</script>

<style scoped>
  .inline-component {
    display: inline;
  }
</style>

Компонент ElementHook служит основой c абстрактный класс, который импортирует все подкомпоненты, которые могут быть отображены с помощью `: is =" lineFragment.type "(например," text "для компонента TextWrapper).

Если вы хотите убедиться, что абзацы зашли в тупик обернутые вокруг границ родительского контейнерного объекта, вы можете рассмотреть возможность добавления white-space: pre-wrap; к классу css, определенному в нижней части SF C.

Answer 3

Простой ответ - нет, для функций рендеринга / шаблонов требуется элемент root. Вместо использования <div> вы можете использовать встроенный элемент, такой как <span> или стиль div с помощью свойства css display: inline, чтобы обойти эту проблему.