VUE.js — это прогрессивная среда JavaScript, используемая для разработки одностраничных приложений (SPA). Это мощная веб-инфраструктура пользовательского интерфейса, разработанная с нуля для постепенного внедрения. Работать с фреймворком VUE.js довольно просто. Эта статья посвящена сборке компонента JQWidget Tab для Vue.

Вкладки упрощают изучение, переключение между различными представлениями и позволяют организовать контент на высоком уровне, например различные наборы данных или функциональные аспекты приложения.

Компонент Tabs для Vue очень гибкий и предназначен для дизайна с плавным размером. Это позволяет закрыть кнопки и изображения на вкладках, поддерживать навигацию с помощью клавиатуры и раскладку справа налево. Можно добавить дополнительную кнопку рядом с вкладками, а также свойство изменения порядка, которое позволяет перетаскивать различные вкладки. Прокрутка вкладок очень полезна для больших данных, когда недостаточно свободного места для отображения всех вкладок.

Предпосылки:

Node.js — чтобы убедиться, что он у вас установлен, запустите команду node -v в cmd. Он выведет текущую версию.

Шаг 1 — Создайте структуру папок:

У нас есть базовая корневая папка, содержащая папки public src и файл package.json. В общей папке есть страница index.html, которая используется в качестве базы. Содержимое представляет собой один ‹div/›, который будет использоваться для визуализации будущего решения Vue.js. Также могут быть дополнительные ссылки по назначению проекта.

Шаг 2 — Настройка и установка:

Вы можете получить конфигурацию файла package.json из приведенного ниже исходного кода. Все необходимые модули включены.

Когда файл package.json будет готов, введите npm install в CLI.

Шаг 3. Создание приложения для вкладок.

Перейдите в общую папку и создайте файл index.html. Это должен быть простой HTML-документ с одним разделом ‹div/›, в котором данные будут отображаться с использованием простого синтаксиса шаблона.

Index.Html:

Следующим шагом будет переход в папку src. В этой папке вы создадите файл main.js. Вам нужно будет добавить туда простую конфигурацию.

Main.js

В той же папке вы должны создать файл App.vue, который является основным файлом для вашего приложения.

App.vue:

В той же папке вы должны создать файл App.vue, который является основным файлом для вашего приложения. Он имеет 3 раздела: шаблон, скрипты и стиль. Ниже приведен формат App.vue для компонента Tab. App.vue имеет структурный тег ‹template/›, в котором определяется структура приложения. Вы должны установить теги для новых компонентов ‹JqxTabs/› там. JqxTabs делит содержимое на несколько разделов. Вы можете заполнить его из «UL» для заголовков вкладок и «DIV» для его содержимого.

В разделе ‹script/› импортируйте вкладки из JQWidgets.

В компонентах добавьте JqxTabs в класс Vue,

Свойства

Свойства компонента ‹JqxTabs/› определяются в члене данных класса Vue. Вы должны поместить их в возвращаемый объект функции данных:

События

События в Vue задаются как атрибут с префиксом @. События, привязанные к компоненту, реализуются в методах-членах класса Vue. Пример события во вкладках показан ниже.

Методы:

Чтобы использовать метод компонента, мы должны иметь его ссылку. В Vue мы обращаемся к компоненту по специальному свойству $refs. Нам нужно добавить желаемую ссылку на имя этого компонента. Если мы хотим добавить дополнительные методы, мы можем реализовать их в этом члене методов класса Vue.

Ниже приведены функциональные возможности компонентов вкладок по умолчанию. Раздел «Стиль» можно использовать для добавления улучшений к этому компоненту.

Возможности компонента Tab для Vue:

1) Интеграция вкладок с другими виджетами:

Вкладки могут быть интегрированы с другими JQWidgets, такими как диаграмма, сетка и т. д. Это помогает определить содержимое вкладки в списке вкладок. Интеграция с другими возможностями виджетов демонстрируется здесь.

2) Вкладки с мастерами:

Мастер — это пошаговый процесс, который позволяет пользователям вводить информацию в установленном порядке и в котором последующие шаги могут зависеть от информации, введенной в предыдущих. Вкладки могут использоваться для отображения мастеров. Демонстрация различных типов мастеров во вкладках отображается здесь.

3) Вкладки с изображениями:

Вкладки можно интегрировать с изображениями, что является отличным способом добавления изображений на веб-страницы. Надлежащее оформление этих изображений сделало бы привлекательный дизайн веб-страницы. Демонстрация этой возможности отображается здесь.

4) Карты внутри вкладок:

Вкладки JQWidget также улучшены для отображения карт. Нам нужны googleapis в теге ‹/head› и файлы mapinsidetab.bundle.js в теге ‹/body› файла Index.js. Они описаны ниже. Демонстрация этой возможности отображается здесь.

Вкладки JQWidget для Vue разработаны с удобными функциями, такими как закрытие вкладок, свертывание вкладок, перетаскивание событий для изменения порядка/перестановки порядка вкладок, сохранение выбора вкладок при перезагрузке страницы с использованием файлов cookie, прокрутки и навигации с помощью клавиатуры для изменения вкладок и т. д. Эти функции полезны для удобного пользовательского интерфейса.

Для получения дополнительной информации посетите наш сайт.