Чтобы сделать хорошо выглядящие приложения Vue, нам нужно стилизовать наши компоненты.

Чтобы облегчить себе жизнь, мы можем использовать компоненты со встроенными стилями.

В этой статье мы рассмотрим, как настроить тосты.

Мы также рассмотрим, как добавлять оповещения и всплывающие подсказки.

Цель тостера

Мы можем изменить расположение тостов.

Мы можем установить свойство toaster, чтобы изменить размещение всплывающего уведомления.

Ниже приведены возможные значения этого свойства:

  • b-toaster-top-right
  • b-toaster-top-left
  • b-toaster-top-center
  • b-toaster-top-full
  • b-toaster-bottom-right
  • b-toaster-bottom-left
  • b-toaster-bottom-center
  • b-toaster-bottom-full

Например, мы можем написать:

<template>
  <div id="app">
    <b-button @click="makeToast()">Show toast</b-button>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    makeToast() {
      this.$bvToast.toast(`hello`, {
        title: "toast",
        autoHideDelay: 5000,
        toaster: "b-toaster-bottom-right"
      });
    }
  }
};
</script>

Мы изменили toaster на “b-toaster-bottom-right” , поэтому тост будет отображаться в правом нижнем углу.

Добавить или добавить

Мы можем установить реквизит append-toast для b-toast на true, чтобы добавить тост.

Авто-скрытие

Чтобы отключить автоматическое скрытие всплывающего уведомления, мы можем установить no-auto-hide в true .

Ссылки

Мы можем создавать тосты со ссылкой.

Для этого мы устанавливаем свойство href.

Например, мы можем написать:

<template>
  <div id="app">
    <b-button @click="makeToast()">Show toast</b-button>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    makeToast() {
      this.$bvToast.toast(`hello`, {
        title: "toast",
        autoHideDelay: 5000,
        href: 'http://example.com'
      });
    }
  }
};
</script>

У нас есть свойство href, которое делает контент ссылкой.

Итак, «привет» будет ссылкой.

б-тост

Чтобы упростить добавление нашего контента в тост, мы можем использовать компонент b-toast.

Чтобы заполнить заголовок, мы можем заполнить слот toast-title.

Например, мы можем написать:

<template>
  <div id="app">
    <b-button @click="$bvToast.show('toast')">Show toast</b-button>
    <b-toast id="toast">
      <template v-slot:toast-title>
        <div>
          <b-img blank blank-color="#ff5555" class="mr-2" width="12" height="12"></b-img>title
        </div>
      </template>
      <p>content</p>
    </b-toast>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Создаем тост с компонентом b-toast.

Чтобы показать тост, мы добавили кнопку.

Вызов метода $bvToast.show(‘toast’) вызывается с идентификатором всплывающего уведомления.

Таким образом, тост можно открыть.

Внутри слота toast-title у нас есть компонент b-img для отображения изображения.

У нас также есть содержимое под ним.

Теперь мы получаем всплывающее уведомление, в котором есть изображения.

Слот по умолчанию имеет тело всплывающего уведомления и состоит из всего, что находится за пределами других слотов.

Оповещения против тостов

Мы можем использовать компонент b-alert для отображения простого предупреждения.

Например, мы можем написать:

<template>
  <div id="app">
    <b-button @click="show = !show">Show Alert</b-button>
    <b-alert
      v-model="show"
      class="position-fixed"
      style="z-index: 2000;"
      variant="warning"
      dismissible
    >alert!</b-alert>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      show: false
    };
  }
};
</script>

b-alert принимает v-model, чтобы определить, когда он будет показан.

Если show равно true, будет показано оповещение.

class — применяемые классы CSS.

style — применяемый стиль.

dismissible позволяет нам закрыть оповещение с помощью кнопки закрытия.

variant позволяет нам изменить вариант стиля.

Подсказки

Мы можем добавить элементы или компоненты всплывающей подсказки с помощью компонента b-tooltip.

Кроме того, мы можем использовать директиву v-b-tooltip для добавления всплывающей подсказки.

Например, мы можем написать:

<template>
  <div id="app">
    <b-button v-b-tooltip.hover title="Tooltip">Hover Me</b-button>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Мы добавили директиву v-b-tooltip с модификатором hover.

hover означает, что всплывающая подсказка отображается при наведении.

title — это заголовок всплывающей подсказки.

В качестве альтернативы мы можем написать:

<template>
  <div id="app">
    <b-button id="tooltip">Hover Me</b-button>
    <b-tooltip target="tooltip" triggers="hover">tooltip</b-tooltip>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Мы устанавливаем идентификатор кнопки на tooltip, что соответствует значению target.

Таким образом, его можно открыть.

triggers позволяет нам установить, что даже вызывает всплывающую подсказку.

Тогда мы получим тот же результат, что и в предыдущем примере.

Вывод

Мы можем добавить всплывающую подсказку с помощью директивы v-b-tooltip или компонента b-tooltip.

Оповещения — это более простые тосты, в которых не может быть столько пользовательского контента.

Тосты можно открывать в разных позициях страницы.