Часть 2: Аккордеонный компонент
Привет! Добро пожаловать во вторую часть этого руководства, в которой мы создаем повторно используемые компоненты с помощью Vue. В части 1 этого руководства мы узнали, как создать компонент вкладки. Нажмите здесь, чтобы прочитать, если вы пропустили это.
В этом руководстве мы узнаем, как создать повторно используемый компонент accordion с помощью Vue.
Приступаем 💪
чего мы достигнем в конце этой статьи
- Создайте многоразовый аккордеон, который позволяет одновременно открывать как несколько, так и один элемент.
- Аккордеон, который принимает элемент по умолчанию, чтобы быть открытым.
Предпосылки
- Требуется базовое понимание Vue. Если нет, пожалуйста, найдите доступные ресурсы, которые помогут вам, а затем вернитесь сюда🙈.
- В этом руководстве мы будем использовать 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
- Если
allowMultiple
ложно, аisExpanded
истинно (то есть элемент открыт), сделайтеid
этого элементаexpandedIndex
. Это автоматически удалит предыдущее значениеexpandedIndex
, что означает закрытие всех остальных элементов и открытие текущего элемента. - Теперь, если
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.