Как создавать уведомления не снизу, а сверху используя toastify во vue 3?

Question

Я хочу использовать библиотеку toasify в vue 3, но мне нужно чтобы карточки появлялись сверху а не снизу. В официальной доке в примерах есть такой вариант, но кода который бы так делал, нету, что странно

toast(message, {
        position: toast.POSITION.TOP_RIGHT,
        limit: 8,
        pauseOnHover: true,
        dangerouslyHTMLString: true,
        hideProgressBar: true,
        autoClose: 3000
    });

Дополнение* - Имеется в виду та позиция, где появляется новая карточка. Тое есть обратите внимание на то, где появляется новая карточка, когда уже штуки 3-4 уже появились. В обычном конфиге, новая карточка появляется снизу, мне же нужно чтобы она появлялась сверху

Answer 1

Для того чтобы уведомления появлялись сверху, вам нужно установить опцию position в toast на значение top.

import { createApp } from 'vue'
import App from './App.vue'
import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css'

const toastOptions = {
  position: 'top',
  // другие опции
}

const app = createApp(App)
app.use(Toast, toastOptions)
app.mount('#app')

Изучайте документацию: vue-toastification.maronato.dev

Answer 2

Оказывается есть специальное свойство для этого - newestOnTop, в документации этого свойства почему то нет, если у вас есть такая же задача какая была у меня, это то что нужно

Мой итоговый конфиг для дефолтоного уведомления, вдруг кому понадобиться -

toast(message, {
        position: toast.POSITION.TOP_RIGHT,
        pauseOnHover: true,
        dangerouslyHTMLString: true,
        hideProgressBar: true,
        autoClose: 3000,
        newestOnTop: true
    });

Удачи вам и больше хороших и полных документаций)

БЛОГ НА HUSL

Как создавать уведомления не снизу, а сверху используя toastify во vue 3?

Ответы (2 шт):