如何在Vuetify中创建一个持续时间后褪色的警报？

如何在 Vuetify 中创建一个Alert，在指定的秒数后消失，类似于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是检查是否设置消息的实用程序函数。
但这并不起作用。更多详情here，

- 不需要这么多代码和自定义想法**：）使用vuetify API（代码更少=更易于维护）：

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

A.显示/隐藏

警报获取值（假=〉隐藏。真=〉显示）。

<v-alert :value="alert">

data () {
  return {
   alert: false,
}

在点击、悬停、计时器或任何逻辑上切换alert到true/false。

- 文档库示例：**https：//www.example.comvuetifyjs.com/en/components/alerts/#transition

B.过渡支柱

使用任何你想要的内置过渡。www.example.comhttps://vuetifyjs.com/en/styles/transitions/#motion
<v-alert transition="fade-transition">

A + B：基本的"hello world"示例

点击显示警报& slide-y-transition 3秒后输出。
一个二个一个一个

额外功能示例

当警报可见时显示计时器（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>

如何在Vuetify中创建一个持续时间后褪色的警报？

1条答案

A.显示/隐藏

B.过渡支柱

A + B：基本的"hello world"示例

额外功能示例

相关问题

热门标签

最新问答