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

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

1. 基础知识

我们首先初始化一个vue项目,删除不需要的组件和样式,主要针对src下一些初始化资源,有过vue项目基础的应该很容易理解,如果没有vue基础建议先熟悉每个初始化文件的作用。

关于vue中如何开发插件可以直接看vue官方文档,简单了解插件开发过程,vue插件文档

现在我们在src目录下新建一个plugin文件夹,里面存放要开发的插件notify.js

// notify.js
let notify = {  //需要在此对象拥有一个install 方法

};
notify.install = function () {
  alert('tangj')
}
// 导出这个对象,如果使用Vue.use()就会自动调用install方法
export default notify;

然后在main函数导入这个模块并使用

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

运行这个vue项目可以看到,页面开始加载有一个弹出框,说明我们创建的插件调用成功

2. notify.js主要功能

上面我们知道了,Vue.use()会自动调用install方法,install第一个参数为Vue构造函数,第二个参数即为输入的内容,默认undefined,所以我们在调用一开始的时候为Vue这个构造函数的原型上添加一个$notify方法,此后,每一个Vue的实例都能调用这个方法,这样我们就可以通过给根组件绑定一个点击事件,让$notify执行。

当然这样还是不够的,回到开头说的,根组件可以设定通知内容和通知延迟时间,相当于给this.$notify传递两个参数,第一个是通知内容,第二个是延迟时间。

因此,原型上的notify函数还得接受两个参数,当有通知内容把通知内容替代,有延迟时间把延迟时间替代,为了插件的完整性,记得要给参数设定默认值。

总结一下业务逻辑:点击页面需要出现一个通知内容,经过延迟时间后消失,所以我们可以导入一个模块,并把这个模块挂载到页面上,经过相应的延迟时间后移除

import modal from './notify.vue'
let notify = {  //需要在此对象拥有一个install 方法

};
notify.install = function (Vue,options={delay:3000}) {
  Vue.prototype.$notify = function (message,opt={}) {
    options = {...options,...opt}; //用自己调用插件时传递过来的属性覆盖默认设置的值
    let v = Vue.extend(modal); //返回的是一个构造函数的子类,参数是包含组件选项的对象
    let vm = new v;
    let oDiv = document.createElement('div'); //创建一个div将实例挂载到元素上
    vm.$mount(oDiv);
    vm.value = message;
    document.body.appendChild(vm.$el);
    setTimeout(()=>{ //根据delay将dom元素移除
      document.body.removeChild(vm.$el);
    },options.delay)
  }
}
// 导出这个对象,如果使用Vue.use()就会自动调用install方法
export default notify;

3. 完善notify.js

现在还有一个问题,我们不断点击的时候,会通知很多个组件,这显然不符合预期

解决的办法很简单,我们只要在执行之前判断是否已经存在了这个实例,如果存在直接返回不再继续,如果不存在,那么执行往后的逻辑

notify.install = function (Vue,options={delay:3000}) {
  Vue.prototype.$notify = function (message,opt={}) {
    if(notify.el)return;//判断dom上是否存在这个实例
    options = {...options,...opt};
    let v = Vue.extend(modal);
    let vm = new v;
    let oDiv = document.createElement('div');
    vm.$mount(oDiv);
    vm.value = message;
    document.body.appendChild(vm.$el);
    notify.el = vm.$el;   //把实例给notify对象
    setTimeout(()=>{
      document.body.removeChild(vm.$el);
      notify.el = null; // 清空这个对象
    },options.delay)
  }
}

最后

这是很简单的一个vue插件写法,我们可以用这种思维创造很多有用的插件,比如vue-router、vue-awesome-swiper等等,很大程度上提高了开发效率

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt消息通知建立一个独立于业务服务系统的消息通知服务,这个服务还可以与开发的语言无关,客户端既可以是安卓也可以是ios,也可以是java或者c#,python等.闲话不多扯,这里只是实现了在vue中使用mqtt的js客户端,后台用.net WEB API用的是c#的mqtt客户端 第一步:安装依赖 np

  • 基于vue框架手写一个notify插件实现通知功能的方法

    简单编写一个vue插件,当点击时触发notify插件,dom中出现相应内容并且在相应时间之后清除,我们可以在根组件中设定通知内容和延迟消失时间. 1. 基础知识 我们首先初始化一个vue项目,删除不需要的组件和样式,主要针对src下一些初始化资源,有过vue项目基础的应该很容易理解,如果没有vue基础建议先熟悉每个初始化文件的作用. 关于vue中如何开发插件可以直接看vue官方文档,简单了解插件开发过程,vue插件文档. 现在我们在src目录下新建一个plugin文件夹,里面存放要开发的插件no

  • 基于Vue框架vux组件库实现上拉刷新功能

    最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑: 1.问题:只刷新一次,解决方法:需要自己手动重置状态 this.scrollerStatus.pullupStatus = 'default', 2.问题:不能滚动,解决方法:因为启用keep-alive缓存,需要设置 activated () { this.$refs.scroller.reset() } 如果还没效果,请在获取后台数据后,执行如下代码 this.$nxtTick(() => { th

  • Python实现手写一个类似django的web框架示例

    本文实例讲述了Python实现手写一个类似django的web框架.分享给大家供大家参考,具体如下: 用与django相似结构写一个web框架. 启动文件代码: from wsgiref.simple_server import make_server #导入模块 from views import * import urls def routers(): #这个函数是个元组 URLpattern=urls.URLpattern return URLpattern #这个函数执行后返回这个元组

  • 基于SpringCloud手写一个简易版Sentinel

    Sentinel 是什么? 随着微服务的流行,服务和服务之间的稳定性变得越来越重要.Sentinel 以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度保护服务的稳定性. 不可否认的是,Sentinel功能丰富,并且在提供好用的dashboard提供配置,但是Sentinel在集成到项目中时需要引入多个依赖,并且需要阅读相关文档,以及dashboard中的相关配置才可以接入到项目中,这个过程还是较为复杂的. 如果我们的项目并不需要这么多的功能,只是需要当某个方法或者某个功能发生异常的时

  • TypeScript手写一个简单的eslint插件实例

    目录 引言 前置知识 第一个eslint规则:no-console 本地测试 本地查看效果 no-console规则添加功能:排除用户指定的文件 发布npm包 引言 看到参考链接1以后,觉得用TS写一个eslint插件应该很简单⌨️,尝试下来确实如此. 前置知识 本文假设 你对AST遍历有所了解. 你写过单测用例. 第一个eslint规则:no-console 为了简单,我们只使用tsc进行构建.首先package.json需要设置入口"main": "dist/index.

  • 基于Java手写一个好用的FTP操作工具类

    目录 前言 windows服务器搭建FTP服务 工具类方法 代码展示 使用示例 前言 网上百度了很多FTP的java 工具类,发现文章代码都比较久远,且代码臃肿,即使搜到了代码写的还可以的,封装的常用操作方法不全面,于是自己花了半天实现一个好用的工具类.最初想用java自带的FTPClient 的jar 去封装,后来和apache的jar工具包对比后,发现易用性远不如apache,于是决定采用apache的ftp的jar 封装ftp操作类. windows服务器搭建FTP服务 打开控制版面,图示

  • vue用Object.defineProperty手写一个简单的双向绑定的示例

    前言 上次写了一个Object.defineProperty() 不详解,文末说要写用它来写个双向绑定.说话算话,说来就来 前文链接 Object.defineProperty() 不详解 先看最后效果 model演示.gif 什么是双向绑定? 1.当一个对象(或变量)的属性改变,那么调用这个属性的地方显示也应该改变,模型到视图(model => view) 2.当调用属性的这个地方改变了这个属性(通常是一个表单元素),那么这个对象(或变量)的属性也会改为最新的值 ,即视图到模型(view =>

  • 如何手写一个简易的 Vuex

    前言 本文适合使用过 Vuex 的人阅读,来了解下怎么自己实现一个 Vuex. 基本骨架 这是本项目的src/store/index.js文件,看看一般 vuex 的使用 import Vue from 'vue' import Vuex from './myvuex' // 引入自己写的 vuex import * as getters from './getters' import * as actions from './actions' import state from './stat

  • 利用Java手写一个简易的lombok的示例代码

    目录 1.概述 2.lombok使用方法 3.lombok原理解析 4.手写简易lombok 1.概述 在面向对象编程中,必不可少的需要在代码中定义对象模型,而在基于Java的业务平台开发实践中尤其如此.相信大家在平时开发中也深有感触,本来是没有多少代码开发量的,但是因为定义的业务模型对象比较多,而需要重复写Getter/Setter.构造器方法.字符串输出的ToString方法.Equals/HashCode方法等.我们都知道Lombok能够替大家完成这些繁琐的操作,但是其背后的原理很少有人会

  • python tensorflow基于cnn实现手写数字识别

    一份基于cnn的手写数字自识别的代码,供大家参考,具体内容如下 # -*- coding: utf-8 -*- import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data # 加载数据集 mnist = input_data.read_data_sets('MNIST_data', one_hot=True) # 以交互式方式启动session # 如果不使用交互式session,则在启动s

随机推荐