Как создать оповещение о затухании после продолжительности в Vuetify? - PullRequest
Новая
       84

Как создать оповещение о затухании после продолжительности в Vuetify?

0 голосов
/ 22 марта 2020

Как создать Предупреждение в Подтвердить , которое исчезает через указанное количество секунд, аналогично предупреждениям в Bootstrap Vue. Я попробовал это: 

<template>
  <transition name="fade">
    <v-alert v-show="visible" v-bind="$attrs" v-on="$listeners">
      <slot></slot>
    </v-alert>
  </transition>
</template>

<script>
export default {
  inheritAttrs: true,
  data() {
    return {
      visible: true,
      timer: null
    };
  },
  props: {
    duration: {
      required: true,
      type: Number
    }
  },
  methods: {
    fade() {
      let value = parseInt(Math.max(this.duration, 0));
      if (value != 0)
        this.timer = setTimeout(() => (this.visible = false), 1000 * value);
    }
  },
  mounted() {
    this.fade();
  }
};
</script>

Использование в других компонентах: 

    <vt-alert
      v-if="hasMessage()"
      :type="message.type"
      :duration="message.duration"
    >{{message.body}}</vt-alert>

hasMessage - это служебная функция, которая проверяет, установлено ли сообщение.

Но это не сработало. Подробнее здесь ,

1 Ответ

2 голосов
/ 22 марта 2020

Не нужно так много кода и нестандартных идей :) Используйте vuetify API (Меньше кода = проще в обслуживании):

https://vuetifyjs.com/en/components/alerts/#api

A. Показать / скрыть

Значение получения оповещения ( false => скрыть. True => показать). 

<v-alert :value="alert">

data () {
  return {
   alert: false,
}

Переключить alert до true / false по нажатию, наведению курсора, таймеру или любому другому логину c.

Пример документа Docs: https://vuetifyjs.com/en/components/alerts/#transition

B. переходные реквизиты

Используйте любой встроенный переход по вашему желанию. Перечислите ее: https://vuetifyjs.com/en/styles/transitions/#motion

<v-alert transition="fade-transition">

A + B: Basi c пример "hello world"

При нажатии показать предупреждение & slide-y-transition через 3 секунды. 

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      alert: false,
    }
  },
  // define methods under the `methods` object
  methods: {
    hide_alert: function (event) {
      console.log('Hide')
      // `event` is the native DOM event
      window.setInterval(() => {
        this.alert = false;
        console.log("hide alert after 3 seconds");
      }, 3000)    
    }
  },
  mounted: function () {
    if(alert){
      this.hide_alert();
    }
  }
})
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.18/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/>

<div id="app">
  <v-app id="inspire">
    <div>
      <div class="text-center mb-4">
        <v-btn
               color="primary"
               @click="alert = true"
               >
          Show alert? {{alert}}
        </v-btn>
      </div>
      <v-alert
               :value="alert"
               color="pink"
               dark
               border="top"
               icon="mdi-home"
               transition="slide-y-transition"
               >
        Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

        Phasellus nec sem in justo pellentesque facilisis. Phasellus magna. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. In hac habitasse platea dictumst. Praesent turpis.
      </v-alert>
    </div>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.18/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>

Пример дополнительных функций

Отображение таймера (3..2..1) при отображении предупреждения + переключение предупреждения по нажатию кнопки ,

О dismissible лучшая идея - создать пользовательскую кнопку X (и использовать ту же функцию отображения / скрытия) *** Пока API не предоставит больше параметров, связанных с этой функцией (стиль / положение и скоро). 

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      message: "show alert? - ",
      alert: false,
      countDown: {
        timer: "3",
        show: false
      },
    }
  },
  // define methods under the `methods` object
  methods: {
    show_alert_and_fade: function(){
      /* toogle alert on click */
      this.alert = !this.alert; 
      /* hide alert after 3 seconds */
      this.resetTimer();
      this.countDownTimer();
      /*  If alert visible - setTimeout() => only executed once */
      if(this.alert == true){
        myTimer = window.setTimeout(() => {
          this.alert = false;
          console.log("Case 1: Time ends - hide alert");
        }, 3000);
      }else{
        /* If alert hidden - clear setTimeout */
        console.log("Case 2: User Hide alert by click - stop setTimeout");
        clearTimeout(myTimer);
        this.resetTimer();
      }
    },
    dismissible_close (value) {
      this.alert = value;
      this.resetTimer();
    },
    /*  recursion function - run time if remain time and alert if visible */ 
    countDownTimer() {
      if(this.countDown.timer > 0 && this.alert) {
        this.countDown.show = true;
        var myTimer = setTimeout(() => {
          this.countDown.timer -= 1;
          this.countDownTimer();
        }, 1000)
        }
      else{
        /* do something */
        this.resetTimer();
      }
    },
    resetTimer(){
      this.countDown.timer = 3;    
    },
    hideTimer(){
      this.countDown.show = false; 
    }
  }
})
body{
  padding: 10px;
}

#close_btn{
  position: absolute;
  right: 6px;
  top: 12px;
}
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.18/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/>

<div id="app">
  <v-app id="inspire">
    <div>
      <div class="text-center mb-4">

        <!-- remove countDown for demo only -->

        <v-btn
               v-bind:color="alert ? 'success' : 'error'"
               @click="show_alert_and_fade"
               v-bind:class="{ active: alert }"
               >
          {{message}} <b> {{alert}}</b>

        </v-btn>

        <v-badge v-if="alert"
                 :content="countDown.timer"
                 :value="countDown.timer"
                 color="red"
                 overlap
                 >
        </v-badge>
      </div>
      <v-alert
               :value="alert"
               color="success"
               dark
               border="top"
               icon="mdi-home"
               transition="slide-y-transition"
               @input="dismissible_close"
               >
        <div id="close_btn">
          <v-btn  color="success" fab x-small @click="show_alert_and_fade">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </div>

        <div class="pt-6 pr-6">
          <p>
            Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
          </p>
          <p>
            Phasellus nec sem in justo pellentesque facilisis. Phasellus magna. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. In hac habitasse platea dictumst. Praesent turpis.
          </p>

        </div>
      </v-alert>
    </div>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.18/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
...