Vue框架：轻松实现定时弹窗，小玩意儿大作用

你们看，网页里那些小小提示窗口竟然还能定时跳出来，简直太神奇！想要实现这种效果其实很简单，只需要用到vue框架就行了。

首先咱们聊聊咋用Vue计时器搞定倒计时时钟。没想到，只要一个计时器就能解决！那要怎么动手嘞？

  

  
剩余{{second}}秒
  


export default {
  data() {
    return {
      second: 5 // 设置初始秒数
    };
  },
  created() {
    let timer = setInterval(() => {
      this.second--; // 每隔1s秒减1
      if (this.second == 0) {
        clearInterval(timer);
        alert("时间到！"); // 达到时间后弹出提示框
      }
    }, 1000);
  }
};

其实很简单！首先弄个初始化秒数 second，然后在Vue的created阶段开个计时器，让他每过一秒减一。接下来就是看看有没到时间限制了，达到的话就停了计时器并弹出警告框。

觉得这办法太小儿科？别急，我们再教你怎么搞出提示来。是不是觉得厉害多？

搞定!首先装好Vue和提醒框组件，用Vue.extend简单的做出来一个Alert。接着，弄个叫AlertPlugin的家伙，然后依葫芦画瓢，把Alert的实例挂在Vue原有的基础上。这样我们就能掌控这个提醒框的开关了！别忘了，如果你想设置提醒框出现时间，只需要找到options.time，它的默认长度可是5秒！

看起来挺酷的对？其实，你可能正琢磨这个小玩意儿咋用。那就让我告诉你，如何轻松搞定那个提示框！

import Vue from 'vue'
import AlertComponent from './components/alert.vue'
// 构建一个Alert实例
const Alert = Vue.extend(AlertComponent)
let interval = null
// 定义插件对象
const AlertPlugin = {
  install(Vue, options = {}) {
    // 生成一个实例对象
    const instance = new Alert()
    // 挂载到一个元素上
    instance.$mount(document.createElement('div'))
    // 将实例添加到Vue原型上
    Vue.prototype.$alert = {
      show() {
        // 显示alert
        document.body.appendChild(instance.$el)
        // 5s后自动消失
        interval = setTimeout(() => {
          document.body.removeChild(instance.$el)
        }, options.time || 5000)
      },
      hide() {
        // 隐藏alert
        document.body.removeChild(instance.$el)
        clearTimeout(interval)
      }
    }
  }
}
export default AlertPlugin

简单死了把那个插件丢进你的Vue项目，用Vue.use()这招启动它就行。想弹出个窗口？快呼叫$alert.show()！根本不用费劲琢磨！

看了这个文章，我们知道了2种在Vue里搞弹出消息挺简单的办法哦～要么就用Vue的计时器，要么就是写个自己的Vue插件。计时器，一眼看到头的事，很容易懂的。而且你还可以随心所欲地定制想出现的提示框样子哟。不过计时器这种方式还是得亲手调，有点麻烦。反之，插件就牛多了，点点鼠标提示立刻出现，简直跟魔法似的神奇。但别忘了，要用插件之前可得学点儿Vue开发知识哈～说到底，这俩都各有特点，选哪种就看你需要什么和你擅长啥！

告诉你如何用Vue做出定时弹窗提醒功能！快在评论区说说你的想法吧觉得有用就给我点个赞分享出去！