QMarkup отображение разметки

Компонент QMarkup библиотеки Quasar предназначен для безопасного отображения HTML-разметки внутри Vue-приложений. Он обеспечивает рендеринг строк с HTML-кодом, автоматически защищая от XSS-атак и поддерживая динамическое обновление содержимого.

Основные свойства

value Основное свойство, которое принимает строку с HTML-кодом для отображения. Например:

<q-markup :value="htmlContent" />

Где htmlContent может содержать любой допустимый HTML:

data() {
  return {
    htmlContent: "<h2>Заголовок</h2><p>Текст параграфа</p>"
  }
}

tag Позволяет задать HTML-тег, который будет обертывать весь контент. По умолчанию это <div>, но можно использовать <section>, <article>, <span> и другие:

<q-markup :value="htmlContent" tag="section" />

sanitize Логическое свойство, управляющее очисткой входной строки от потенциально опасного кода. По умолчанию включено (true). Можно отключить для доверенного HTML:

<q-markup :value="trustedHtml" :sanitize="false" />

Использование sanitize: false рекомендуется только при полной уверенности в источнике данных, чтобы избежать уязвимостей.

max-height и scrollable Позволяют ограничить высоту блока и добавить скролл при переполнении содержимого:

<q-markup 
  :value="htmlContent" 
  :max-height="300" 
  scrollable
/>

Динамическое обновление контента

QMarkup автоматически отслеживает изменения свойства value. Любое изменение строки приведет к обновлению отображаемого HTML:

data() {
  return {
    htmlContent: "<p>Первый вариант текста</p>"
  }
},
mounted() {
  setTimeout(() => {
    this.htmlContent = "<p>Обновленный текст с <strong>жирным выделением</strong></p>";
  }, 3000);
}

Поддержка пользовательских стилей

Внутри QMarkup можно использовать локальные или глобальные CSS-классы. Для этого применяется стандартный атрибут class:

<q-markup 
  :value="htmlContent" 
  class="custom-markup"
/>

CSS:

.custom-markup h2 {
  color: #4a90e2;
  font-weight: 700;
}

.custom-markup p {
  line-height: 1.6;
}

Также можно комбинировать с style для инлайнового форматирования:

<q-markup 
  :value="htmlContent" 
  style="padding: 10px; background-color: #f5f5f5;"
/>

Использование с компонентами Quasar

QMarkup может быть встроен в другие компоненты Quasar, например, QCard или QExpansionItem для отображения форматированного текста внутри карточек или выпадающих элементов:

<q-card>
  <q-card-section>
    <q-markup :value="htmlContent" />
  </q-card-section>
</q-card>

При использовании с динамическими данными из API рекомендуется включать sanitize для защиты от нежелательного кода:

<q-markup :value="apiResponse.content" :sanitize="true" />

Встраивание ссылок и изображений

QMarkup корректно отображает стандартные HTML-элементы: ссылки (<a>), изображения (<img>), списки (<ul>, <ol>), таблицы (<table>). Примеры:

<q-markup :value="`<p>Ссылка: <a href='https://quasar.dev'>Quasar</a></p>
<img src='https://cdn.quasar.dev/logo/svg/quasar-logo.svg' width='50' />`" />

Безопасность

  • Автоматическая очистка HTML предотвращает вставку скриптов и потенциально опасных тегов.
  • Для полностью доверенного контента sanitize можно отключить, но необходимо убедиться, что источники безопасны.
  • Рекомендуется использовать QMarkup только для контента с контролируемых или проверенных источников.

Сравнение с v-html

Использование v-html в Vue позволяет отображать HTML, но не обеспечивает автоматическую защиту от XSS, тогда как QMarkup:

  • Встроенно фильтрует опасный код.
  • Поддерживает динамические обновления и стили Quasar.
  • Удобно интегрируется с другими компонентами библиотеки.

Дополнительные возможности

  • Слоты: QMarkup позволяет вставлять слоты для кастомизации рендеринга отдельных частей, например, для заголовков или параграфов с иконками.
  • События: можно слушать клики на ссылках через стандартные Vue-события, добавляя обработку внутри QMarkup.

Пример:

<q-markup 
  :value="htmlContent" 
  @click.native="handleClick"
/>

QMarkup обеспечивает удобный и безопасный способ отображения HTML-разметки в приложениях на Quasar, позволяя динамически изменять контент, стилизовать его и интегрировать в интерфейс без риска для безопасности.

Оглавление