首先设置一个v-alert组件弹出框,根据v-model的值来进行弹出显示,按钮来控制

<v-app>

    <button @click="click">点击</button>

    <v-alert outlined dismissible type="success" v-model="alert" class="demowidth

           v-show="isShow(2)"

    >点击成功</v-alert>

  </v-app>

设置需要的数据

data() {

    return {

      alert: false, 

      timer: '',

      value: 0,

    };

  },

在methods中设置方法

methods: {

    click() {

      this.alert = true;

      this.timer = setInterval(this.get, 500);

    },

    get() {

      this.value += 1;

    },

    isShow(time) {

      if (this.value > time) {

        this.alert = false;

        clearInterval(this.timer);

        this.value = 0;

      }

    },

  },

这里就是利用定时器的原理来进行弹出窗的显示时间的

 

Logo

前往低代码交流专区

更多推荐