Vue.js 插件开发：透明提示框插件、倒计时返回首页插件

╰+攻爆jí腚メ 2022-05-30 05:54 356阅读 0赞

在做项目时开发了两个插件，一个是透明提示框、另一个是长时间不操作自动返回首页的插件，在这里分享一下。

一、网页透明提示框插件

1.效果（支持同时弹出多个提示）

![70][]

2.代码以及使用方法

代码：Alert.vue + notify.js

使用方法：

将两个代码文件放到文件夹notify之下，

在mian.js中加入以下代码：

import notify from './notify/notify'
    // ...
    Vue.use(notify)

在需要弹提示的地方调用Vue的$notify函数即可。

Alert.vue:

<template>
      <div>
        <div class="alert show" v-if="messages.length!==0">
          <ul>
            <li v-for="msg in messages" v-html="msg"></li>
          </ul>
        </div>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          show: false,
          messages: [],
          bgColor: ''
        }
      },
      methods: {
        notify (msg) {
          this.messages.push(msg)
          setTimeout(() => {
            if (this.messages.length && this.messages[0] === msg) {
              this.messages.shift()
            }
          }, 1000)
        }
      }
    }
    </script>
    
    <style scoped>
    .alert {
      transform: translate(-50%, -100%);
      left: 50%;
      top: 50%;
      position: fixed;
      text-align: center;
      margin: auto;
    }
    
    li {
      font-size: 36px;
      color: white;
      background-color: rgba(0,0,0,0.5);
      margin: 5px auto;
      border-radius: 5px;
      padding: 5px 20px;
      animation: animateFade 2s; /*chrome 43.0+, IE 10.0+, firefox 16.0+, safari 9.0+, opera 30.0+*/
      -moz-animation: animateFade 2s; /* firefox 5.0+ */
      -webkit-animation: animateFade 2s; /* safari4.0+ & chrome 4.0+ */
      -o-animation: animateFade 2s; /* opera 12.0+*/
    }
    
    @keyframes animateFade {
      from {
        background-color: rgba(0,0,0,1);
        color: rgba(255,255,255,1)
      }
      to {
        background-color: rgba(0,0,0,0.6);
        color: rgba(200,200,200,0.6);
      }
    }
    
    @-moz-keyframes animateFade {
      from {
        background-color: rgba(0,0,0,1);
        color: rgba(255,255,255,1)
      }
      to {
        background-color: rgba(0,0,0,0.6);
        color: rgba(200,200,200,0.6);
      }
    }
    
    @-webkit-keyframes animateFade {
      from {
        background-color: rgba(0,0,0,1);
        color: rgba(255,255,255,1)
      }
      to {
        background-color: rgba(0,0,0,0.6);
        color: rgba(200,200,200,0.6);
      }
    }
    
    @-o-keyframes animateFade {
      from {
        background-color: rgba(0,0,0,1);
        color: rgba(255,255,255,1)
      }
      to {
        background-color: rgba(0,0,0,0.6);
        color: rgba(200,200,200,0.6);
      }
    }
    
    </style>

notify.js:

import Alert from './Alert'
    
    var $vm
    export default {
      install (Vue, options) {
        if (!$vm) {
          const AlertPlugin = Vue.extend(Alert)
          $vm = new AlertPlugin().$mount()
          document.body.appendChild($vm.$el)
        }
        Vue.prototype.$notify = function (msg) {
          $vm.notify(msg)
        }
      }
    }

二、长时间不操作自动返回首页的插件

1.功能

有一些系统希望用户在某些页面长时间无操作（点击、触屏等）则自动返回首页，当用户长时间无操作时，会弹出一个倒计时提示框，提示用户将在倒计时结束后放回系统首页。

2.效果

![70 1][]

3.代码以及使用方法

代码：index.js+Timer.vue

使用方法：

将两个代码文件放到文件夹timer之下，

在mian.js中加入以下代码：

import timer from './timer/index'
    // ...
    Vue.use(timer)

然后在需要使用的地方调用Vue的$startListen方法即可，传入参数为最长无操作时间秒数、提示框倒计时秒数，默认分别为120s、10s。

index.js

import TimerComponent from './Timer'
    
    var defListenTime = 2 * 60 // 默认2分钟无操作返回
    var defNoticeTime = 10 // 默认提示10s
    var $vm
    
    export default {
      install (Vue, options) {
        if (!$vm) {
          const TimerPlugin = Vue.extend(TimerComponent)
          $vm = new TimerPlugin().$mount()
          document.body.appendChild($vm.$el)
        }
        Vue.prototype.$startListen = function (noOpsTime, showTime) {
          noOpsTime = noOpsTime || defListenTime
          showTime = showTime || defNoticeTime
          $vm.startListen(noOpsTime, showTime)
        }
      }
    }

Timer.vue:

<template>
      <div class="notice" v-show="show">
        <div class="notice-box">
          <div class="notice-content">
            您长时间没有操作，系统将在
            <span>{
       { noticeLeftTime/1000 }}</span>秒后返回首页
          </div>
          <button @click="cancelReturn">取消返回</button>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          show: false,
          listenTime: 0,
          noticeTime: 0,
          listenTimerIdx: 0,
          noticeTimerIdx: 0,
          noticeLeftTime: 0
        }
      },
      methods: {
        startListen: function(noOpsTime, showTime) {
          this.show = false
          this.listenTime = noOpsTime * 1000
          this.noticeTime = showTime * 1000
          this.listenBody()
        },
        listenBody: function() {
          this.resetTimer()
          window.addEventListener('mousedown', this.resetTimer)
          window.addEventListener('keydown', this.resetTimer)
          window.addEventListener('click', this.resetTimer)
          window.addEventListener('touchmove', this.resetTimer)
          window.addEventListener('touchstart', this.resetTimer)
        },
        resetTimer: function(event) {
          if (this.show) {
            return
          }
          if (this.listenTimerIdx) {
            clearTimeout(this.listenTimerIdx)
          }
          this.listenTimerIdx = setTimeout(this.showNotice, this.listenTime)
        },
        showNotice: function() {
          this.noticeLeftTime = this.noticeTime
          this.show = true
          let that = this
          this.noticeTimerIdx = setInterval(function() {
            if (that.noticeLeftTime <= 0) {
              that.returnHome()
            } else {
              that.noticeLeftTime -= 1000
            }
          }, 1000)
        },
        clearNotice: function() {
          if (this.noticeTimerIdx) {
            clearInterval(this.noticeTimerIdx)
          }
          if (this.show) {
            this.show = false
          }
        },
        cancelReturn: function() {
          this.clearNotice()
          this.resetTimer()
        },
        returnHome: function() {
          this.clearNotice()
          clearTimeout(this.listenTimerIdx)
          window.location = '/'
        }
      }
    }
    </script>
    
    <style scoped>
    .notice {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    
    .notice-box {
      width: 250px;
      height: 150px;
      background-color: #efefef;
      box-shadow: 0 0 10px #777777;
      border-radius: 5px;
    }
    
    .notice-content {
      height: 40%;
      margin: 0 auto;
      padding: 20px;
    }
    
    span {
      color: red;
    }
    </style>

[70]: /images/20220530/3b476c75cd0044d88b0e2fb801c57c80.png
[70 1]: /images/20220530/581a05504a8547ee8cc5aac477c36a2c.png