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

最新推荐文章于 2024-08-04 13:07:16 发布

木马啊

最新推荐文章于 2024-08-04 13:07:16 发布

阅读量2.5k

点赞数 1

分类专栏： vue.js 文章标签： Vue插件开发

本文链接：https://blog.csdn.net/u010419337/article/details/79457647

版权

本文分享了在Vue项目中开发的两个实用插件：透明提示框插件和倒计时返回首页插件。透明提示框支持同时显示多个提示，使用时只需引入Alert.vue和notify.js。倒计时返回首页插件会在用户长时间无操作后弹出倒计时提示，并在设定时间后返回首页，通过引入index.js和Timer.vue实现。

摘要由CSDN通过智能技术生成

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

一、网页透明提示框插件

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

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%);