Часть 2: Аккордеонный компонент

Привет! Добро пожаловать во вторую часть этого руководства, в которой мы создаем повторно используемые компоненты с помощью Vue. В части 1 этого руководства мы узнали, как создать компонент вкладки. Нажмите здесь, чтобы прочитать, если вы пропустили это.

В этом руководстве мы узнаем, как создать повторно используемый компонент accordion с помощью Vue.

Приступаем 💪

чего мы достигнем в конце этой статьи

  1. Создайте многоразовый аккордеон, который позволяет одновременно открывать как несколько, так и один элемент.
  2. Аккордеон, который принимает элемент по умолчанию, чтобы быть открытым.

Предпосылки

  1. Требуется базовое понимание Vue. Если нет, пожалуйста, найдите доступные ресурсы, которые помогут вам, а затем вернитесь сюда🙈.
  2. В этом руководстве мы будем использовать vue3, поэтому убедитесь, что он настроен. Наши коды также будут написаны на машинописном языке и API композиции. Ладно, не волнуйтесь, здесь нечего бояться 😉.

Далее…

Создайте папку components в папке src. Теперь в папке components создайте папку accordions с файлами Accordion.vue и AccordionItem.vue.

Если вы выполнили описанные выше шаги, структура вашей папки должна выглядеть так:

└── src
    ├── components
    │   └── accordions
    │         ├── Accordion.vue
    │         └── AccordionItem.vue  
    ├── App.vue

Accordion.vue

Мы будем действовать шаг за шагом. Сначала скопируйте и вставьте приведенный ниже код в файл Accordion.vue.

initializeState: Эта функция возвращает либо массив, либо строку в зависимости от того, передается ли allowMultiple в качестве реквизита на аккордеоне.

Чтобы узнать, какой элемент аккордеона открыт или закрыт, у нас есть expandedIndex и _index .

Computed — это мощный хук, который позволяет нам преобразовывать или выполнять вычисления с нашими данными, а затем легко повторно использовать результат.

Здесь мы также устанавливаем новое значение для expandedIndex на основе изменений, полученных из значения _index.

Чтобы передать значение от родительского к дочернему компоненту, мы использовали хук provide.

Итак, мы передали allowMultiple, indices, expandedIndex дочернему компоненту.

В конце концов, мы хотим, чтобы компонент отображался таким образом.

<Accordion>
   <AccordionItem>
   <AccordionItem>
</Accordion>
or
<Accordion allowMultiple>
   <AccordionItem>
   <AccordionItem>
</Accordion>

AccordionItem.vue

Здесь находится самая сложная часть руководства. Но я позабочусь о том, чтобы все упростить. Пожалуйста, не торопитесь, чтобы следовать дальше. 💪

Затем добавьте приведенное ниже в файл AccordionItem.vue.

Здесь нет ничего особенного. Мы просто импортировали необходимые хуки и объявили необходимые реквизиты.

Далее нам нужна служебная функция, которая генерирует случайный идентификатор. Это необходимо для ссылки на каждый элемент аккордеона.

Мы просмотрели размер и использовали метод Math.random() для случайной генерации числа. А с помощью метода Math.floor() мы смогли округлить число до ближайшего целого числа.

charAt: этот метод возвращает символ dictionary указанного индекса (позиции).

Здесь мы объявляем наши переменные и получаем все данные, переданные от родительского компонента (Accordion.vue) с помощью хука inject

Далее давайте напишем функцию, которая следит за расширением элемента.

Хорошо, позвольте мне объяснить, что у нас здесь есть.

toggleContent: Эта функция переключает элемент, чтобы открыть или закрыть его. Он отслеживает события нажатия кнопки элемента ( скоро вы увидите, куда мы передали это ).

watchExpand: эта функция используется для присвоения нового значения expandedIndex.

Давайте посмотрим на условия в функции watchExpand

  1. Если allowMultiple ложно, а isExpanded истинно (то есть элемент открыт), сделайте id этого элемента expandedIndex. Это автоматически удалит предыдущее значение expandedIndex, что означает закрытие всех остальных элементов и открытие текущего элемента.
  2. Теперь, если allowMultiple верно, нужно еще раз рассмотреть две вещи. Разрешить несколько элементов означает, что необходим массив, в который мы можем добавлять или удалять столько элементов, сколько у нас есть.
  • isExpanded верно, добавьте id этого элемента к остальным indices. i.e Откройте элемент с остальными открытыми элементами
  • И isExpanded ложно, удалите id этого элемента из списка indices. Что означает удалить элемент из остальных открытых элементов.

Наконец, мы запускаем функцию watchExpand, когда компонент mounted и updated

О да, это еще не конец 😩. Нам нужно следить за изменениями в expandedIndex.

getExpandCondition: Эта функция возвращает логическое значение. Если expandedIndex является массивом, проверьте, включено ли id этого элемента, а если expandedIndex является строкой, проверьте, совпадают ли id этого элемента и expandedIndex.

watch: этот хук реагирует на изменения данных. Здесь он проверяет изменения в expandedIndex и обновляет isExpanded. Это также служит контроллером, который задает условие для открытия и закрытия элемента (проверьте функцию watchExpand, чтобы снова увидеть условие).

Вот, мы почти закончили 😉. Добавьте приведенное ниже в AccordionItem.vue.

Код здесь показывает структуру для AccordionItem. accordionItem_content — это область, содержащая дочерние элементы элемента. У нас есть button для переключения области содержимого (accordionItem_content).

Хорошо, давайте добавим ниже, чтобы стилизовать наш код. Вы можете изменить стиль на тот, который соответствует вашим потребностям.

App.vue

Скопируйте и вставьте следующий код в файл App.vue. Здесь особо ничего не поделаешь. Просто импортируем наши компоненты и передаем необходимые реквизиты.

Окончательно!!! 💃

Аплодисменты вам, если вы сможете добраться до этого финального этапа. На своем терминале запустите эту команду: npm run serve. И если вы хорошо следовали коду, ваш окончательный результат должен выглядеть так.

Спасибо, что прочитали эту статью 🤗. Я считаю, что это было полезно для вас. Пожалуйста, хлопайте как можно больше и оставляйте комментарии к любому вкладу.

Если вы пропустите часть 1 этого руководства, нажмите здесь, чтобы прочитать.

Полный код этого руководства можно найти здесь.

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.