Як інтегрувати компоненти Vue у додаток Quasar?

TL;DR: Дізнайтеся, як реалізувати дії з вузлами дерева та контекстне меню в додатку Quasar за допомогою компонентів Syncfusion Vue TreeView та Context Menu. Налаштуйте проект Quasar, встановіть пакети Syncfusion Vue і налаштуйте дані TreeView і варіанти меню. Додайте події для обробки дій з вузлами, таких як додавання, перейменування та видалення, з динамічними елементами меню.

Quasar — це високорівневий фреймворк Vue.js, який спрощує створення адаптивних, багатофункціональних веб-додатків. Побудований на Vue.js, він пропонує широкий спектр попередньо створених компонентів, утиліт і тем, що дозволяє розробникам швидко створювати візуально привабливі та функціональні інтерфейси. Його модульна архітектура дозволяє легко інтегрувати додаткові функціональності, а адаптивний дизайн забезпечує безперебійну роботу на різних пристроях і розмірах екранів. З Quasar розробники можуть оптимізувати свій робочий процес, зменшити час розробки та легко створювати потужні додатки на Vue.js, що робить його популярним вибором як для новачків, так і для досвідчених розробників.

У цьому блозі ми реалізуємо дії з вузлами дерева та контекстне меню в додатку Quasar, використовуючи компоненти Syncfusion Vue.

Почнемо!

Передумови

Перед тим як почати з Quasar, переконайтеся, що у вас є наступне:

• Передумови для фреймворка Quasar
• Передумови для компонентів Syncfusion Vue.

Налаштування додатку Quasar

Для початку створіть новий додаток Quasar з нуля, виконавши наступну команду.

npm init quasar

Після виконання цієї команди вам буде запропоновано кілька запитань, як показано нижче:

√ What would you like to build? » App with Quasar CLI, let's go!  
√ Project folder: ... my-app  
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)  
√ Pick script type: » Javascript  
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite 2 (stable | v1)  
√ Package name: ... my-app  
√ Project product name: (must start with a letter if building mobile apps) ... Quasar App  
√ Project description: ... A Quasar Project  
× Install project dependencies? (recommended) » Yes, use npm

Це налаштування дозволяє вам налаштувати проект Quasar відповідно до ваших потреб.

Встановлення пакунків Syncfusion Vue в додаток Quasar

Компоненти Syncfusion Vue доступні на npmjs.com.
На даний момент встановіть пакети Syncfusion Vue за допомогою наступної команди.

npm install --save @syncfusion/ej2-vue-navigations

Реалізація дій з вузлами дерева та контекстного меню в додатку Quasar

Давайте реалізуємо дії з вузлами дерева та контекстне меню в додатку Quasar, використовуючи компоненти Syncfusion Vue TreeView та Context Menu.

Крок 1: Імпортуємо компонент Vue TreeView

Почнімо з імпорту компонента Vue TreeView та визначення полів і джерела даних у тегу <script> файлу ~/src/App.vue.

Крок 2: Оголосіть події для Vue TreeView та Context Menu

Далі оголосіть події для компонентів Vue TreeView та Context Menu, як показано в наступному прикладі коду.

var treevalidate = treeObj.value.ej2instances[0];
var targetNodeId = treevalidate.selectedNodes[0];
var targetNode = document.querySelector('[data-uid="' + targetNodeId + '"]');
var contentmenutree = contextObj.value.ej2instances[0];
if (targetNode.classList.contains('remove')) {
contentmenutree.enableItems(['Remove Item'], false);
}
else {
contentmenutree.enableItems(['Remove Item'], true);
}
if (targetNode.classList.contains('rename')) {
contentmenutree.enableItems(['Rename Item'], false);
}
else {
contentmenutree.enableItems(['Rename Item'], true);
}
}

## Крок 3: Налаштування стилів компонента

Нарешті, налаштуйте зовнішній вигляд компонентів за допомогою необхідних стилів.

Ось підсумковий код для вищезгаданих кроків у файлі **~/src/App.vue**.


treevalidate.beginEdit(targetNodeId);  
 }  
}  
const beforeopen = function (args) {  
 var treevalidate = treeObj.value.ej2_instances[0];  
 var targetNodeId = treevalidate.selectedNodes[0];  
 var targetNode = document.querySelector('[data-uid="' + targetNodeId + '"]');  
 var contentmenutree = contextObj.value.ej2_instances[0];  
 if (targetNode.classList.contains('remove')) {  
 contentmenutree.enableItems(['Remove Item'], false);  
 }  
 else {  
 contentmenutree.enableItems(['Remove Item'], true);  
 }  
 if (targetNode.classList.contains('rename')) {  
 contentmenutree.enableItems(['Rename Item'], false);  
 }  
 else {  
 contentmenutree.enableItems(['Rename Item'], true);  
 }  
}  

Запуск проекту

Щоб запустити проект, виконайте наступну команду:

npm run dev

Потім перейдіть за адресою http://localhost:9000/ у вашому улюбленому браузері, щоб переглянути відрендеровані компоненти Syncfusion Vue у вашому проекті Quasar.

Вивід має виглядати приблизно так, як на зображенні нижче.

Імплементація дій з вузлами дерева та контекстного меню в додатку Quasar за допомогою компонентів Syncfusion Vue

Висновок

Дякуємо за те, що прочитали цей блог! Ми розглянули, як інтегрувати компоненти Syncfusion Vue у фреймворк Quasar.
Наступаючи ці кроки, ви також можете використовувати інші компоненти Syncfusion Vue у ваших додатках Quasar. Ми заохочуємо вас спробувати цей посібник і поділитися своїми відгуками в коментарях нижче!

Останню версію Essential Studio можна знайти на сторінці ліцензій та завантажень для існуючих клієнтів. Якщо ви не є клієнтом Syncfusion, ви можете почати 30-денний безкоштовний пробний період, щоб дослідити доступні функції.

Якщо у вас є запитання, не соромтеся звертатися через наш форум підтримки, портал підтримки і портал відгуків. Ми завжди готові допомогти вам!

Схожі блоги

• Легко працюйте з даними OLAP Cube за допомогою Vue Pivot Table
• Легко створюйте інтерактивні діаграми планування поверхів у Vue
• Інтеграція компонентів форм Syncfusion Vue та Vuelidate
• Як створити високопродуктивні Astro додатки з компонентами Vue

Оригінально опубліковано на https://www.syncfusion.com 28 січня 2025 року.

Перекладено з: How to Integrate Vue Components in Quasar App?