基于vue框架手写一个notify插件，实现通知功能

最新推荐文章于 2024-08-25 08:47:29 发布
最新推荐文章于 2024-08-25 08:47:29 发布
阅读量2.4k 收藏 4
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43374180/article/details/88922209
版权
本文介绍如何基于Vue框架手写一个notify插件，实现通知功能。从基础知识到具体实现，包括插件的安装、notify.js的主要功能以及完善过程。通过示例，展示了如何在Vue实例上添加方法，接收参数并控制通知内容和延迟消失时间，同时解决多次点击导致的通知堆积问题。
摘要由CSDN通过智能技术生成

基于vue框架手写一个notify插件，实现通知功能

简单编写一个vue插件，当点击时触发notify插件，dom中出现相应内容并且在相应时间之后清除，我们可以在根组件中设定通知内容和延迟消失时间。
900566-20190330151654005-1475430727.gif

1. 基础知识

我们首先初始化一个vue项目，删除不需要的组件和样式，主要针对src下一些初始化资源，有过vue项目基础的应该很容易理解，如果没有vue基础建议先熟悉每个初始化文件的作用。
关于vue中如何开发插件可以直接看vue官方文档，简单了解插件开发过程，vue插件文档。
现在我们在src目录下新建一个plugin文件夹，里面存放要开发的插件notify.js

// notify.js
let notify = {   //需要在此对象拥有一个ins
最低0.47元/天 解锁文章
唐吉小学生
关注
Vue 技术栈 带你探究 vue-router 源码 手写vue-router
超逸の学习技术博客
03-12 1201
现在开始逐步深入Vue 技术栈，想了想，技术栈专栏的主要内容包括： 1、Vue源码分析 2、手把手教 保姆级 撸代码 3、无惧面试，学以致用，继承创新 4、谈谈前端发展与学习心得 5、手写源码技术栈，附上详细注释 6、从源码中学习设计模式，一举两得 7、编程思想的提升及代码质量的提高 8、通过分析源码学习架构，看看优秀的框架 9、项目实战开发 10、面试准备，完善个人简历
一篇由简到难的 Vue 面试题+详解答案
2401_84153102的博客
04-21 777
指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
编写一个Vue插件notification
一汀程序狗的博客
06-22 4396
怎么为Vue编写插件 vue官网有介绍 https://cn.vuejs.org/v2/guide/plugins.html 本例 通过把它们添加到 Vue.prototype 上实现添加插件。 比如 Vue.prototype.$notify = notify getStart 首先使用vue-cli生成一个项目，命令是： npm install -g @vue/cli或者 ya...
vue-notifyjs插件，简单的消息提示
06-19 998
前后端交互提示会带来好的体验，vue-notifyjs就是一款比较简单的消息提示工具 首先先进入项目 之后再进行下载 npm i vue-notifyjs 下载完之后进入main.js写入这两行代码主要是导包和全局引用 import Notify from 'vue-notifyjs' Vue.use(Notify) 注意，这是个组件一定要写，不然弹不出消息 <notifications></notifications> //引用组件自带样式 <style s
推荐文章：Vue-snotify —— 让你的Vue应用通知更加灵动高效
最新发布
gitblog_00423的博客
08-25 706
推荐文章：Vue-snotify —— 让你的Vue应用通知更加灵动高效 vue-snotifyVuejs 2 Notification Center项目地址:https://gitcode.com/gh_mirrors/vu/vue-snotify 项目介绍 Vue-snotify 是一个轻量级、功能丰富的 Vue 通知组件库，旨在提供多种样式和高度可配置的 toast 通知。这款插件不仅设...
vue 如何写一个消息通知组件$notify，简单易懂，你上你也行
热门推荐
weixin_39394140的博客
12-30 3万+
废话少说，上效果图 前言 本人在做毕设的时候用elementui写页面的时候，觉得这个通知很有趣，可以用一个命令（this.$notify)这样子调用，很神奇。所以打算自己封装一个，以后就可以随便调用了。 第一步：创建这个通知的模板 首先，你在vue的项目里面，找个合适的位置创建一个文件夹，创建一个vue的文件以及一个js文件 代码如下 myNotify.v...
vue实现浏览器桌面通知
qq_40407998的博客
01-05 8804
vue实现浏览器桌面通知 当浏览器最小化，或者切换到其他标签页不在当前系统页面，或在其他页面时依然可以显示通知
vue在js文件中调用$notify
weixin_45966674的博客
09-19 847
而 当他们拿不到的东西 就会去更上级拿 最终 拿到vue上。但是 其实 学过构造函数和原型链的人会很好理解这一点。每一个vue组件都是通过 vue构造出来的一个实例。但在js中 我们this的指向就会发生一些不同。所以 他们的this都是指向当前实例对象。但js中 指向的最上级是window对象。那么 我们只想要直接从vue里拿就可以了。然后通过实例对象的原型链调用就好了。我们在vue组件中可以直接。我们直接引入vue实例。
基于vue框架手写一个notify插件实现通知功能的方法
01-19
简单编写一个vue插件，当点击时触发notify插件，dom中出现相应内容并且在相应时间之后清除，我们可以在根组件中设定通知内容和延迟消失时间。 1. 基础知识 我们首先初始化一个vue项目，删除不需要的组件和样式，...
vue简单实现Notify组件
kuBi_MaNong的博客
03-12 2130
使用vue简单实现vant的notify组件 思路: 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 html <div id="notify"></div> notify.js import Vue from "vue" import "./notify.css" const Demo = Vue.extend({ props:['msg'], render(){ return ( <div class="show
vuesnotify一个基于Vuejs2的消息通知组件
08-08
vue-snotify一个基于Vuejs 2的消息通知中心。9种类型的吐司通知（异步，确认，提示等等）。能够在不同的位置同时创建吐司。拥有许多配置选项（图标，背景，超时，位置等等）。自定义完全控制的造型，包括动画。存储库包含3种不同的样式。
vue从零实现一个消息通知组件的方法详解
10-15
主要介绍了vue从零实现一个消息通知组件的方法,结合实例形式分析了vue实现消息通知组件的具体原理、实现步骤、与相关操作技巧,需要的朋友可以参考下
vue 使用vuex实现消息通知提示
weixin_38984353的博客
09-13 3393
2.更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数,在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数，你可以向 store.commit 传入额外的参数。因为你可能这个铃铛数量的改变是多个页面影响的。4.接下来vuex的工作都准备好了，接下来在你需要操作的页面，我是在mian.js 调用action的方法。至此利用vuex进行实时刷新的消息通知数量的功能已完成。
vue.js 消息通知插件_Vue.js通知插件
cuk5239的博客
07-22 835
vue.js 消息通知插件 提示通知 (vue-notifikation) Vue.js notification plugin. Vue.js通知插件。 安装 (Installation) Library can be installed via downloading a git repo: 可以通过下载git repo来安装库： git clone https://github.c...
vue.js 消息通知插件_一个不错的Vue通知插件
cuk5239的博客
07-28 1594
vue.js 消息通知插件 通知Vue JS???? (Notification Vue JS ????) The Notification vue plugin allow you to display notifications from all your app. Just with one ligne of code. I know there are lots of others but the p...
vue通知提醒消息
weixin_55853065的博客
10-17 8892
最近有个项目需求就是在客户端的右上角要实时展示提醒消息，下面来看下简单的实现步骤/* 全局Notification */})}
利用vue从零实现一个消息通知组件
qq_29055201的博客
03-03 2167
利用vue从零实现一个消息通知组件 平时，我们肯定用过类似element-ui,antd等一些UI框架，感受它们带给我们的便利。但当我们的需求或者设计这些框架内置的相差太大，用起来，就会觉得特别别扭，这时候，就有必要自己来重新造轮子。 重新造轮子，有几个好处，1.所有代码都是服务你的业务，没有太多用不上的东西。2.代码是由自己维护，而不是第三方，方便维护。3.提升自己的视野，让自己站在更高的角度来...
Vue进阶（二）设计高级组件——自定义通知
Niall_Tonshall的博客
03-05 1316
这篇文章主要是为了记录笔者长期以来对于 $on 和 $emit 存在的一个误区。 看过一些博客上面将 $on 和 $emit 的使用称之为父组件监听子组件。当子组件对用户的行为做出响应时，可以向父组件 $emit 一个事件，当父组件监听到该事件时，父组件调用对应的方法来处理。 比如存在一个comp组件，它的任务是this.$emit('test')。 <template> <div>this is a son comp</div> </template>
vue自定义插件--右上角通知框，随任务的轮询结束可自动关闭
qq_39352780的博客
07-23 2113
前言 最近在做一个基于vue的云控制台的项目，其中包括很多创建主机、创建云盘等功能，但是创建需要一个时间，得做一个正在创建中的消息通知窗进行展示来告知客户，同时随任务的结束，通知窗显示成功失败，并可以自动隐藏或者手动关闭。 elementui里有一个Notification通知插件，但是有好多地方不符合我的需求，于是查阅资料自己封装一个。 业务逻辑 总结一下业务逻辑：当点击触发某任务时，首先后台接口返回操作成功，并有任务taskid列表， 效果如下： 任务正在进行： 任务成功： 实现 文件目录 代码
Vue前端框架实现增删改查功能示例
资源摘要信息:"增删改查vue前端代码示例" 知识点: 1. Vue.js: Vue.js是一种开源的JavaScript框架，用于构建用户界面和单页应用程序。...例如，DirectPurchase.vue可能是一个Vue.js组件，用于实现直接购买功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值