Помощь с написанием плагина под vue3

[akudinov28]

Приветствую, коллеги.
Столкнулся со стеной, и не знаю, как её пробить. Суть в том, что мне нужно сделать уведомления (toasts). Ни один из готовых пакетов под vue3 не реализует в полной мере тот функционал, который мне нужен. Можно, конечно, взять готовый пакет и переписать под себя, но это получаются костыли (остается ненужный исходный функционал, а нужный прикручивается как собаке пятая нога). Решил писать свой плагин, с глобальной регистрацией через vue.use, опциями, блекджеком и куртизанками, но документации в интернете практически ноль. Есть информация, как зарегистрировать плагин, добавить глобальный метод, но дальше тишина. Как динамически вставлять компоненты из метода, как с ними работать. Пустота.

Нужны гуру Vue3. Небольшая беседа в дискорд с вправлением моего мозга и разъяснениями. Отблагодарю материально очень хорошо. Стоит так же учитывать, что у меня другой часовой пояс (МСК +6), соответственно, в праймтайм я уже сплю

Контакты:
discord - nord0007

 

[mippoosedev]

Делаешь тост-систему (появление плашек, их удаление, анимации)
Внутри тоста добавляешь слот
При создании тоста передаешь нужный компонент в этот слот(например дефолтное уведомление, какое то уведомление с картинкой и тп)

Информация по слотам:

Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org

 

[akudinov28]

mippoosedev написал(а):

Делаешь тост-систему (появление плашек, их удаление, анимации)
Внутри тоста добавляешь слот
При создании тоста передаешь нужный компонент в этот слот(например дефолтное уведомление, какое то уведомление с картинкой и тп)

Информация по слотам:

Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org

Нажмите для раскрытия...

Вот с тост-системой и возникают сложности. Я хотел бы, допустим, иметь компонент-контейнер, и компонент айтемов (самих тоастов). Вот с контейнером всё получается, а как динамически вставить в дом новый экземпляр компонента не понимаю.

 

[mippoosedev]

template:

HTML:

<template>
  <div
      :style="getStyles"
      class="Notifier"
  >
    <transition-group
        tag="div"
        name="Notification"
        class="notifications"
    >
      <div
          v-for="notification in notificationsList"
          :key="notification.id"
          class="Notification"
          :class="`type-${notification.type}`"
      >
          // ТВОЙ СЛОТ/КОМПОНЕНТ СЮДА
      </div>
    </transition-group>
  </div>
</template>

notificationsList это просто ref([]), ничего особенного, просто коллекция уведомлений(в ней хранишь свои уведомлялки)
уведомлению делаешь какое нибудь свойство/поле(хз как в жабаскрипте по умному, я не гений) с типом уведомления
С помощью этого типа уведомления создаешь свой нужный компонент (уведомление текстом, уведомление с картинкой, что-нибудь ещё очень крутое). Данная фича называет "dynamic components". Простыми словами про неё можно прочитать тут https://blog.logrocket.com/making-components-dynamic-vue-3/#what-are-dynamic-components

Ну и стили простеньких анимаций, если они тебе нужны

CSS:

.Notification-enter {
  opacity: 0;
  transform: translateY(get-vh(80px));
}

.Notification-enter-to {
  opacity: 1;
  transform: translateY(0);
}

.Notification-leave {
  opacity: 1;
  transform: translateX(0);
}

.Notification-leave-to {
  opacity: 0;
  transform: translateX(get-vh(-160px));
}

P.S Данный код предоставляю в качестве ознакомления и прошу не использовать его 1 в 1 на своих проектах. Спасибо за уважение!