Кастомный код — 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
| Prop | Type | Обязателен | Описание |
|---|---|---|---|
html_content | string | да | HTML код |
css_styles | string | нет | CSS стили |
js_scripts | string | нет | JS скрипты |
Специфика работы
Компонент изолирует стили и скрипты используя ShadowDOM. Для изоляции скриптов также используется IIFE. Компонент обернут в client-only, поэтому его содержимое не гидрируется и могут быть проблемы с индексацией данных поисковиками. При размонтировании компонента - ShadowDOM удаляется, вместе с содержащимися в нем стилями и скриптами.