zhouql-notify v1.1.5

简介

Vue2全局通知，一行代码一条通知。

安装

使用npm

npm install zhouql-notify

使用yarn

yarn add zhouql-notify

快速开始

在 main.js 中引入组件

import Notify from "zhouql-notify"

引入 css 样式文件

import "zhouql-notify/notify.css"

使用插件，好嘞！一切就绪。🎉

Vue.use(Notify)

如果想调整通知距离顶部的距离，可以在注册时传入 top 配置，代码如下

Vue.use(Notify, {
  top: 100
})

我为什么封装它？

在使用element-ui组件库时，它的通知调用采用了配置对象的形式，但在我写一些小型网站时，这样调用显得非常麻烦。

首先呢，如果写一行，代码可读性很差。如果写多行，显得很冗余。

其次，配置对象的写法，每次都要写重复的对象名，比如：title，message，type，这对于简单的通知来说显得很不友好！当然更加复杂的通知，采用配置对象的形式是没问题的。

通知是一个频繁使用的组件。于是我改用了函数式调用，通过函数声明通知类型，参数限制至多三个，不然函数式就意义不大了。下面是本组件最终的调用代码：

this.$notify.success("成功消息");

一行就是一个消息，才是我想要的。

自定义通知样式

可以添加css代码覆盖默认即可，下面是一个简单示例

// 通知容器
.z-notify {
    border-radius: 4px;
    background: #ddd;
}
// 通知字体图标
.z-notify i { }
// 通知内容
.z-notify span {}
// 具体icon微调等等

api

基础

插件在vue原型添加了$notify，你可以通过 this.$notify 全局访问下层函数接口，比如发送消息，函数名是消息类型，第一个参数是消息文字，第二个参数是消息展示时长，默认3秒，单位毫秒：

this.$notify.success("成功消息");

发送警告消息：

this.$notify.warning("警告消息");

发送普通消息：

this.$notify.info("普通消息");

发送错误消息：

this.$notify.error("错误消息");

发送开心消息：

this.$notify.happy("开心的消息");

发送自由消息：

this.$notify.free("自由的消息");

发送自由消息，展示5秒：

this.$notify.free("自由的消息", 5000);

加载

下面是loading加载，稍微有点特殊，支持三个参数，前两个参数同上，第三个参数可以切换加载时的icon图标风格，支持3中风格。 普通加载，持续，直到收到新消息或者触发关闭。

this.$notify.loading("普通加载，直到收到新消息或者触发关闭");

自定义时长加载，最多5秒后关闭加载。

this.$notify.loading("自定义时长加载，最多5秒后关闭加载", 5000);

自定义时长加载，最多5秒后关闭加载，同时更改加载图标风格为style1。

this.$notify.loading("自定义时长加载，最多5秒后关闭加载", 5000, "icon1");

自定义时长加载，最多5秒后关闭加载，同时更改加载图标风格为icon1。

this.$notify.loading("自定义时长加载，最多5秒后关闭加载", 5000, "icon2");

自定义时长加载，最多5秒后关闭加载，同时更改加载图标风格为icon3。

this.$notify.loading("自定义时长加载，最多5秒后关闭加载", 5000, "icon3");

普通加载，持续，直到收到新消息或者触发关闭，更改加载图标风格为icon1。

this.$notify.loading("自定义时长加载，最多5秒后关闭加载", "icon1");

关闭

在某些情况下，可能想要提前关闭通知，这非常简单。

this.$notify.close();