Кастомный код — custom

Компоненты для отображения списка документов в статьях/разделах.

  • Файлы:
  • app/components/article-blocks/custom/ACustom.vue

Быстрый старт

<script setup lang="ts">
import ACustom from 'components/articleBlocks/custom/ACustom.vue'

const blockContent = {
  html_content: `<div class="btn-new">Button</div>`,
  css_styles: `.btn-new { background-color: red; }`,
  js_scripts: `console.log('TEST TEST');`
};
</script>

<template>
  <ACustom :content="blockContent" />
</template>

API

Props

PropTypeОбязателенОписание
html_contentstringдаHTML код
css_stylesstringнетCSS стили
js_scriptsstringнетJS скрипты

Специфика работы

Компонент изолирует стили и скрипты используя ShadowDOM. Для изоляции скриптов также используется IIFE. Компонент обернут в client-only, поэтому его содержимое не гидрируется и могут быть проблемы с индексацией данных поисковиками. При размонтировании компонента - ShadowDOM удаляется, вместе с содержащимися в нем стилями и скриптами.