Vue-tabsbar

Введение

Это компонент с несколькими вкладками, основанный на Vue, Vue-router и ElementUI. Версия 2.0.

Архитектура программного обеспечения

1. Состояние вкладки сохраняется через sessionStorage.
2. Компонент отслеживает изменения в Vue-router для адаптации панели вкладок к изменениям маршрута.

Инструкция по установке

1. Убедитесь, что вы уже включили Vue-router и ElementUI.
2. Поместите компонент в свой проект.
3. После добавления просто импортируйте его (методы импорта компонентов Vue здесь не рассматриваются, обратитесь к документации).

Использование

Пример вызова:

<tabs-bar :dont-delete="['index']" :dont-listen="['login']" :multiple="['test']" index-key="name" title-key="meta.title"></tabs-bar>

Props

Примечание

1. Добавление или удаление маршрутов в процессе разработки может привести к неправильному порядку в списке вкладок. Просто очистите sessionStorage и обновите страницу. Эта проблема не возникнет после нормального запуска.
2. На данный момент тестирование проводилось только в случае одного выхода из маршрута. Не тестировалось, есть ли ошибки при динамических маршрутах, нескольких выходах из маршрута или вложенных маршрутах.

Особое примечание

1. У меня небольшой опыт работы, и я в основном занимаюсь бэкенд-разработкой. Я не профессиональный фронтенд-разработчик. Мне просто понадобился этот компонент, поэтому я создал его сам. Если он вам нужен, вы можете использовать его.
2. Поскольку компонент использовался и тестировался только в ситуации с одним выходом из маршрута, другие ситуации не тестировались. Если вам интересно или это необходимо, вы можете расширить его самостоятельно. В коде оставлено как можно больше комментариев.

Лицензия

Этот контент выпущен под лицензией MIT.

Участие и вклад

1. Форкните этот репозиторий.
2. Создайте ветку Feat_xxx.
3. Отправьте код.
4. Создайте запрос на вытягивание.