Как создать пользовательские компоненты, используя компонентный ввод-вывод

В статье « Введение в компонентный ввод-вывод» описано, как вы можете использовать готовые компоненты на любом сайте независимо от используемой системы управления контентом, языков или технологий. Преимущества включают в себя:

• сотни готовых, привлекательных и настраиваемых компонентов на выбор, включая блоки контента, галереи, панели навигации, виджеты социальных сетей, формы и многое другое
• код компонента может быть установлен простым вырезанием и вставкой
• одни и те же компоненты могут быть использованы на других страницах, и сайты будут обновляться мгновенно
• нетехническим редакторам легко вносить изменения в WYSIWYG-редакторе и проверять его с помощью предварительного просмотра в реальном времени
• все пользователи могут делиться ссылками панели ввода-вывода Component Io и совместно работать над одними и теми же элементами
• Компонентный ввод-вывод быстрый и быстро доставляет элементы одним вызовом API, независимо от количества, встроенного в страницу
• Вы можете переключать CMS или создавать процессы в любой точке и сохранять компоненты
• полное справочное руководство и помощь в чате в режиме реального времени доступна
• Бесплатная пробная учетная запись может быть использована для тестирования службы с вашей системой.

Компонент IO Пользовательские компоненты

Несмотря на огромный доступный диапазон, компонентный ввод-вывод позволяет разработчикам создавать и редактировать свои собственные компоненты. В этом уроке я покажу, как создать простой пользовательский компонент линейчатой ​​диаграммы, который можно отображать и настраивать на любом сайте:

Концепции разработки компонентов

Компонент IO использует компонентную модель Vue.js. Те, кто имеет опыт работы с фреймворком, сразу распознают концепции и синтаксис. Тем не менее, я не эксперт Vue.js — но немного знаний HTML, CSS и JavaScript достаточно для создания сложного компонента.

Все компоненты инкапсулированы; их стили и код не могут «просочиться» в другие части страницы. Например, заголовок компонента гистограммы является элементом H2

 h2 {
  font-family: comic-sans;
  font-size: 8em;
  color: #f00;
}

Vue.js гарантирует, что эти (ужасные!) Стили будут применяться только к нашему компоненту, а не к заголовкам H2 Однако стиль, применяемый ко всем заголовкам H2 Это может быть полезно, поскольку наш компонент может наследовать шрифты, цвета и размеры по умолчанию.

Шаг 1: создайте пустой компонент

Войдите в component.io , а затем нажмите Пустой компонент на странице проекта :

В меню « Правка» выберите « Редактировать имя компонента» и введите «barchart» или другое подходящее имя.

Шаг 2: Определите поля

Поля используются для настройки компонента. Они разрешают:

1. Редакторы контента для изменения значений.
2. Другие компоненты должны быть созданы с другой конфигурацией. Например, если нам требуются две гистограммы, мы можем продублировать первую и изменить значения полей соответственно.

В меню « Правка» выберите « Добавить / удалить поля» и введите необходимые поля:

Для этого элемента управления я определил:

 <h2 v-text="title"></h2>

 <h2>{{ title }}</h2>

 <ul>
    <li v-for="item in items" :style="item.style">
        <span>{{ item.barlabel }} 
            <strong>{{ item.barpc }}</strong>
        </span>
    </li>
</ul>

 h2 {
    font-weight: normal;
}

ul {
    padding: 2px 0;
    margin: 1em 0;
    list-style-type: none;
    border-left: 1px solid #666;
}

li {
    line-height: 1.2;
    padding: 1px 4px;
    margin: 0 0 1px 0;
}

span {
    display: block;
    color: #888;
    mix-blend-mode: difference;
}

strong {
    float: right;
    font-size: 0.8em;
    font-weight: normal;
    line-height: 1.5;
}

 // initialisation
let 
    items = component.data.items,
    totValue = 0, maxValue = 0;

for (let i = 0; i < items.length; i++) {
    totValue += items[i].barvalue;
    maxValue = Math.max(maxValue, items[i].barvalue);
    items[i].style = '';
}

 // component created
component.mounted = function() {

    for (let i = 0; maxValue && i < items.length; i++) {

        let 
            color = items[i].barcolor || '#888',
            pc = Math.round(items[i].barvalue / maxValue * 100);

        // calculate bar percentage
        items[i].barpc = (Math.round(items[i].barvalue / totValue * 100)) + '%';

        // set bar style
        items[i].style = 'background-image:linear-gradient(90deg,' + color + ' ' + 
            pc + '%,transparent ' + pc + '%,transparent ' + (100 - pc) + '%);';
    }

};

 <component key=XXXXX></component>

 <script project="YYYYY" src="https://cdn.component.io/v1"></script>