Многострочный текст

В Petite-Vue управление многострочным текстом реализуется с помощью реактивных данных и привязок к DOM. Библиотека сохраняет компактность синтаксиса Vue, но ориентирована на лёгкие сценарии без необходимости полной настройки компонентов и сборщиков.

Определение реактивных данных

Любой многострочный текст в Petite-Vue хранится в реактивной переменной. Для этого используется объект, передаваемый в v-scope:

<div v-scope="{ description: `Это многострочный
текст, который можно
редактировать и отображать
в шаблоне.` }">
  <pre>{{ description }}</pre>
</div>

Особенности:

  • Использование обратных кавычек (`) позволяет хранить текст с переносами строк без необходимости вставки \n.
  • Тег <pre> сохраняет форматирование текста, включая пробелы и переносы строк.
  • Любые изменения свойства description автоматически обновляют отображение.

Двусторонняя привязка с <textarea>

Для интерактивного редактирования многострочного текста применяется привязка v-model:

<div v-scope="{ content: `Начальный текст
с переносами строк.` }">
  <textarea v-model="content" rows="5" cols="40"></textarea>
  <pre>{{ content }}</pre>
</div>

Пояснения:

  • v-model обеспечивает двустороннюю реактивность между <textarea> и свойством content.
  • Любые изменения в <textarea> мгновенно отображаются в <pre>.
  • Автоматическое обновление упрощает создание редакторов, заметок или описаний.

Форматирование текста в шаблоне

Для сохранения многострочного форматирования без использования <pre> применяется фильтрация символов переноса строки. Например, с помощью v-html и замены \n на <br>:

<div v-scope="{ notes: `Строка 1
Строка 2
Строка 3` }">
  <div v-html="notes.replace(/\n/g, '<br>')"></div>
</div>

Ключевые моменты:

  • Метод replace(/\n/g, '<br>') преобразует переносы строк в HTML-разметку.
  • Использование v-html необходимо для корректного отображения <br> вместо буквальных символов \n.
  • Такой подход удобен для вывода отформатированного текста в блогах, комментариях или сообщениях.

Реактивные вычисления и многострочный текст

Многострочные данные можно использовать внутри вычисляемых свойств или функций для динамического изменения текста:

<div v-scope="{
  title: 'Заголовок',
  body: `Первый абзац
Второй абзац`,
  formattedBody() {
    return this.body.toUpperCase();
  }
}">
  <h2>{{ title }}</h2>
  <pre>{{ formattedBody() }}</pre>
</div>

Особенности:

  • Любые изменения в body автоматически отражаются в formattedBody().
  • Вычисляемые функции помогают преобразовывать текст без вмешательства в шаблон.
  • Позволяет реализовать автоматическое форматирование, генерацию отчётов и другие сценарии.

Составные многострочные тексты

Можно комбинировать несколько реактивных переменных для построения итогового текста:

<div v-scope="{
  header: 'Вступление',
  content: `Текст первого абзаца
Текст второго абзаца`,
  footer: 'Заключение',
  fullText() {
    return `${this.header}\n${this.content}\n${this.footer}`;
  }
}">
  <pre>{{ fullText() }}</pre>
</div>

Примечания:

  • Конкатенация строк с помощью шаблонных литералов позволяет сохранять переносы.
  • Любая реактивная переменная, участвующая в формировании текста, автоматически обновляет итоговый вывод.
  • Метод подходит для генерации писем, отчётов или инструкций на лету.

Практические советы

  • Для отображения текста с сохранением всех пробелов и переносов лучше использовать <pre> или CSS-свойство white-space: pre-wrap.
  • Если текст вводится пользователем, v-model обеспечивает мгновенное обновление реактивных данных.
  • Для больших текстов можно разбивать на несколько свойств и объединять их через вычисляемые функции, что улучшает читаемость кода и упрощает сопровождение.

Многострочный текст в Petite-Vue управляется простыми реактивными объектами, что позволяет создавать динамичные интерфейсы с минимальным количеством кода, сохраняя форматирование и обеспечивая гибкость при редактировании.

Оглавление