List
Vue-компонент списку елементів.
Установка
npm i @yamasters/list --save
Використання
Цей компонент містить в собі всю логіку та мінімальний функціонал, який необхідний для роботи компонента списку. Працює в парі із пагінатором, який вже підключений та повністю готовий до роботи. Архітектура повинна включати в себе глобальний компонент та локальні шаблони.
Глобальний компонент
Вхідні параметри
Компонент приймає наступні вхідні параметри (як props
):
/* Вхідні параметри, які приймає компонент */
props: {
/* Налаштування компонента, обов"язковий параметр */
dataParams: {
type: String,
required: true
},
/* Режим дебага, опціональний параметр */
debug: {
type: Boolean,
required: false
}
}
Як підключити
В проекті необхідно створити файл List.vue та підключити цей компонент як міксін:
module.exports = {
mixins: [
require('@yamasters/list')({
default: require('./lists/default.vue')
})
]
}
Аргументом конструктор компонента приймає об'єкт, який містить локальні шаблони компонентів списків конкретного проекту. В прикладі вище:
{
default: require('./lists/default.vue')
}
де default - це назва (name) компонента.
Локальний шаблон компонента
Вхідні параметри
Компонент приймає наступні вхідні параметри (як props
):
data
- масив даних, отриманих з АРІ
merge
- вказує, що треба додати нові елементи до існуючих (true
), або замінити старі (false
)
locked
- якщо true
, то це означає, що компонент знаходиться в режимі очікування відповіді від АРІ
Як підключити
Файл ./lists/default.vue
повинен містити в собі міксін субкомпонента:
module.exports = {
mixins: [
require('@yamasters/list/subcomponent')
]
}
Субкомпонент містить в собі мінімально необхідний функціонал для всіх локальних шаблонів. Також він має обчислюваний аргумент items
, який містить в собі масив елементів і доступний для всіх локальних шаблонів (як і значення вхідних параметрів).