ew-message 安裝與使用

一個(gè)基于 typescript 而封裝的消息提示框插件，可用于不使用ui組件庫(kù)的中小型網(wǎng)站中。

安裝

npm install ew-message --save-dev//或者 yarn add ew-message

引入

<script src="./dist/ew-message.min.js"></script>

消息提示框插件如下:

const msg1 = ewMessage('默認(rèn)消息提示框');
const msg1 = ewMessage({
  content: '默認(rèn)消息提示框'
});

option 配置對(duì)象有如下參數(shù):

interface ewMessageOption {
  content: string; //消息提示框內(nèi)容，必傳參數(shù)
  center?: boolean; //消息提示框內(nèi)容是否居中
  type?: string; //消息提示框類(lèi)型，有四種: info,success,warning,error
  duration?: number; //消息提示框消失時(shí)間
  showClose?: boolean; //是否顯示關(guān)閉按鈕
  stylePrefix?: string; //消息提示框樣式前綴，注意插件有檢測(cè)如果導(dǎo)入了樣式文件，則這個(gè)配置無(wú)效
  showTypeIcon?: boolean; // 是否顯示類(lèi)型圖標(biāo)，默認(rèn)為true
  typeIcon?: string; // 自定義類(lèi)型圖標(biāo)
  closeIcon?: string; // 自定義關(guān)閉按鈕圖標(biāo)
  container?: string | HTMLElement; // 掛載元素
  immediate?: boolean; // 是否立即渲染消息提示框
  removeClassName?: string; // 移除消息提示框動(dòng)畫(huà)類(lèi)名，目前內(nèi)置動(dòng)畫(huà)類(lèi)名值: fadeOut與scaleDown
  removeClassNameSymbol?: string; // 指定多個(gè)移除動(dòng)畫(huà)類(lèi)名并且分隔符不是空白時(shí)傳入
}

ps: 推薦使用導(dǎo)入樣式文件的方式。

cdn 引入

//樣式引入
// CDN:https://www.unpkg.com/ew-message/dist/ew-message.min.css
// CDN:https://www.unpkg.com/ew-message/dist/ew-message.min.js

在組件中使用

import ewMessage from 'ewMessage';
//  導(dǎo)入樣式
import 'ew-message/dist/ew-message.min.css';
const msg = ewMessage(option); //option為配置對(duì)象，詳情見(jiàn)前述

當(dāng)然也可以不引入樣式，插件檢測(cè)了如果不導(dǎo)入樣式文件，則會(huì)自動(dòng)添加樣式，并且也可以給樣式添加類(lèi)名前綴自定義樣式。

參數(shù)接口

這里主要介紹函數(shù)的參數(shù)類(lèi)型。

字符串參數(shù)

默認(rèn)參數(shù)可以是一個(gè)字符串，用作消息提示框的內(nèi)容，如:

const msg = ewMessage('這是一個(gè)默認(rèn)的消息提示框');

配置對(duì)象

配置對(duì)象主要有 6 個(gè)屬性，分別如下:

content

content 是一個(gè)字符串，用作消息提示框的內(nèi)容，默認(rèn)為空，如果在開(kāi)發(fā)環(huán)境下（即導(dǎo)入的是非生產(chǎn)模式的文件 ewMessage.js），則會(huì)在控制臺(tái)給出警告，如:

const msg = ewMessage({ content: '這是一個(gè)默認(rèn)的消息提示框' });

center

center 屬性是一個(gè)布爾值，表示是否讓消息提示框的內(nèi)容劇中，默認(rèn)是 false。如:

// 消息提示框內(nèi)容居中
const msg = ewMessage({ content: '這是一個(gè)默認(rèn)的消息提示框', center: true });

type

type 的值雖然是一個(gè)字符串，但只支持"info" | "success" | "warning" | "error"，表示消息提示框的類(lèi)型，默認(rèn)是值是"info"。如:

const msg = ewMessage({
  content: '這是一個(gè)成功的消息提示框',
  center: true,
  type: 'success' // 成功消息提示框
});

duration

該字段的值是一個(gè)數(shù)值，表示消息提示框關(guān)閉的時(shí)間，默認(rèn)值是 6s，可以自定義修改。如:

const msg = ewMessage({
  content: '這是一個(gè)默認(rèn)的消息提示框',
  center: true,
  type: 'success',
  duration: 2000 // 消息提示框?qū)⒃?s后關(guān)閉
});

需要注意的是，插件內(nèi)部做了一個(gè)小小的規(guī)范化，如果傳入的時(shí)間即 duration 的值小于 1000，則會(huì)自動(dòng)乘以 10。

ps: 0.0.7 版本做了一個(gè)優(yōu)化，如果 duration 不是一個(gè)數(shù)值，則會(huì)在開(kāi)發(fā)環(huán)境下提示警告，如果小于等于 0，則會(huì)取 1000 作為默認(rèn)值，默認(rèn)值也由 6s 變成了 1s。

ps: 不建議將該值設(shè)置的過(guò)大。

maxDuration (0.0.7 版本新增)

該字段的值也是一個(gè)數(shù)值，表示消息提示框的最大關(guān)閉時(shí)間，插件內(nèi)部會(huì)將該值與傳入的 duration 值做比較，取兩者之間的最小值，默認(rèn)值是 10s。如:

const msg = ewMessage({
  content: '這是一個(gè)默認(rèn)的消息提示框',
  center: true,
  type: 'success',
  duration: 120000,
  maxDuration: 10000 // 最大關(guān)閉時(shí)間設(shè)置的是10s，因此消息提示框?qū)⒃?0s后關(guān)閉，而不是12s后關(guān)閉
});

 ps: 如果傳入的值不是一個(gè)數(shù)值，也會(huì)在開(kāi)發(fā)環(huán)境下提示警告，如果小于等于 duration,則會(huì)取 duration 作為默認(rèn)值。

ps: 不建議設(shè)置該值。

showClose

該字段的值是一個(gè)布爾值，表示是否顯示消息提示框的關(guān)閉按鈕，默認(rèn)值是 true，可以將值設(shè)置為 false。如:

const msg = ewMessage({
  content: '這是一個(gè)默認(rèn)的消息提示框',
  showClose: false
});

ps: 需要注意的是如果將 duration 的值設(shè)置為 0,showClose 設(shè)置為 false,則在開(kāi)發(fā)環(huán)境下會(huì)提供警告，然后自動(dòng)開(kāi)啟消息提示框的關(guān)閉按鈕。

stylePrefix

該屬性是一個(gè)字符串，表示樣式類(lèi)名的前綴，默認(rèn)是'ew-',可以自定義類(lèi)名，方便自己修改樣式。如:

const msg = ewMessage({
  content: '這是一個(gè)默認(rèn)的消息提示框',
  stylePrefix: 'el-'
});

以上代碼將會(huì)給消息提示框的樣式類(lèi)名前綴變成 el-,比如原本是 ew-message 類(lèi)名將變成 el-message。

通常來(lái)講這個(gè)屬性應(yīng)該是用不到的，只有在確實(shí)需要自定義樣式的時(shí)候可以用到。

showTypeIcon (0.0.8)新增

該屬性是一個(gè)布爾值，表示是否顯示圖標(biāo)，會(huì)根據(jù)相關(guān)的類(lèi)型來(lái)匹配相應(yīng)的圖標(biāo)，比如 info 類(lèi)型就是 info 類(lèi)型的圖標(biāo),默認(rèn)值是 true。如下所示:

const msg = ewMessage({
  content: '這是一個(gè)默認(rèn)的消息提示框',
  showTypeIcon: true
});

typeIcon(0.0.8 新增)

該屬性用于自定義圖標(biāo)，需要將 showTypeIcon 設(shè)置為 true 才行，如果默認(rèn)的圖標(biāo)不符合需求，可以自己傳入一個(gè) img 標(biāo)簽或者 svg 標(biāo)簽自定義一個(gè)圖標(biāo)，或者是任意元素，不過(guò)需要自己調(diào)整圖標(biāo)樣式，可以定義${prefix}-message-${type}-icon相關(guān)的類(lèi)名來(lái)使用默認(rèn)的樣式,其中 prefix 的值為前綴名默認(rèn)是 ew,type 為消息提示框類(lèi)型，如 info。如下所示:

const msg = ewMessage({
  content: '這是一個(gè)默認(rèn)的消息提示框',
  showTypeIcon: true,
  typeIcon:
    '<svg t="1695191942528" class="ew-message-icon ew-message-info-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7731" id="mx_n_1695191942529"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM448 448v384h128V448H448z m0-256v128h128V192H448z" fill="#1677ff" p-id="7732"></path></svg>'
});

closeIcon(0.0.8 新增)

該屬性用于自定義關(guān)閉按鈕的圖標(biāo)，需要將 showClose 設(shè)置為 true 才行，如果默認(rèn)的關(guān)閉按鈕圖標(biāo)不符合需求，可以自己傳入一個(gè) img 標(biāo)簽或者 svg 標(biāo)簽自定義一個(gè)圖標(biāo)，或者是任意元素，不過(guò)需要自己調(diào)整圖標(biāo)樣式，可以定義${prefix}-message-close-icon相關(guān)的類(lèi)名來(lái)使用默認(rèn)的樣式,其中 prefix 的值為前綴名，默認(rèn)是 ew。

如:

// 不推薦替換默認(rèn)的圖標(biāo)
const msg = ewMessage({
  content: '這是一個(gè)默認(rèn)的消息提示框',
  showTypeIcon: true,
  closeIcon:
    '<svg t="1695191942528" class="ew-message-close-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7731" id="mx_n_1695191942529"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM448 448v384h128V448H448z m0-256v128h128V192H448z" fill="#1677ff" p-id="7732"></path></svg>'
});

container(0.0.9 新增)

該屬性用于設(shè)置消息提示框掛載的元素，可以傳入一個(gè) dom 元素字符串或者是 dom 元素，不滿(mǎn)足則會(huì)在開(kāi)發(fā)環(huán)境下給出警告提示，默認(rèn)值是 body 元素。如:

const msg = ewMessage({
  content: '這是一個(gè)默認(rèn)的消息提示框',
  container: '#test'
});
// 將消息提示框掛載到頁(yè)面當(dāng)中id為test的元素中

immediate(0.0.9 新增)

該屬性用于是否立即渲染消息提示框，如果設(shè)置為 false，則需要手動(dòng)調(diào)用 render,render 方法可以傳也可以不傳參數(shù)，方法來(lái)渲染消息提示框，默認(rèn)值是 true。如:

const msg = ewMessage({
  content: '這是一個(gè)默認(rèn)的消息提示框',
  immediate: false
});
msg.render(); // 內(nèi)部會(huì)自動(dòng)獲取配置對(duì)象并渲染

removeClassName(0.0.9 新增)

該屬性用于卸載消息提示框時(shí)添加的動(dòng)畫(huà)類(lèi)名，目前內(nèi)置有 fadeOut 和 scaleDown 動(dòng)畫(huà)效果，如指定了正確的動(dòng)畫(huà)類(lèi)名值，當(dāng)點(diǎn)擊關(guān)閉或者是自動(dòng)關(guān)閉消息提示框的時(shí)候，會(huì)有相應(yīng)的動(dòng)畫(huà)效果,默認(rèn)值是空字符串，即沒(méi)有動(dòng)畫(huà)效果。如:

const msg = ewMessage({
  content: '這是一個(gè)默認(rèn)的消息提示框',
  removeClassName: 'fadeOut' // 或者也可以傳入ew-message-fadeOut
});

也可以傳入多個(gè)類(lèi)名，多個(gè)類(lèi)名之間可以使用任意值或者空白來(lái)隔開(kāi)，如果不是使用空白隔開(kāi)，則需要指定 removeClassNameSymbol 的值，例如:

const msg = ewMessage({
  content: '這是一個(gè)默認(rèn)的消息提示框',
  removeClassName: 'fadeOut scaleDown' // 或者也可以傳入ew-message-fadeOut ew-message-scaleDown
  // 這里是使用空白隔開(kāi)，因此不需要指定 removeClassNameSymbol
});

const msg = ewMessage({
  content: '這是一個(gè)默認(rèn)的消息提示框',
  removeClassName: 'fadeOut,scaleDown' // 或者也可以傳入ew-message-fadeOut ew-message-scaleDown
  removeClassNameSymbol: ','
  // 這里是使用逗號(hào)隔開(kāi)
});

我們可以結(jié)合animate.css來(lái)為移除消息提示框添加對(duì)應(yīng)的動(dòng)畫(huà)效果，如果頁(yè)面當(dāng)中引入了該樣式文件，則可以傳入相應(yīng)的類(lèi)名，如:

// 假設(shè)頁(yè)面引入了animate.css文件
const msg = ewMessage({
  content: '這是一個(gè)默認(rèn)的消息提示框',
  removeClassName: 'animate__animated animate__bounce'
});

removeClassNameSymbol(0.0.9 新增)

用于指定多個(gè) removeClassName 的分隔符，如果 removeClassName 指定的是單個(gè)類(lèi)名或者是多個(gè)以空白隔開(kāi)的類(lèi)名，則不需要傳入該值。如:

const msg = ewMessage({
  content: '這是一個(gè)默認(rèn)的消息提示框',
  removeClassName: 'fadeOut+scaleDown' // 或者也可以傳入ew-message-fadeOut ew-message-scaleDown
  removeClassNameSymbol: '+'
  // 這里是使用+隔開(kāi)
});

messageZIndex(0.1.0 新增)

用于自定義消息提示框的顯示層級(jí)，是一個(gè) number 值，用于覆蓋默認(rèn)得到 z-index:1000，無(wú)默認(rèn)值。如:

const msg = ewMessage({
  content: '這是一個(gè)默認(rèn)的消息提示框',
  messageZIndex: 2000
});
// 設(shè)置消息提示框的顯示層級(jí)為2000

實(shí)例方法接口

除了屬性接口之外，我們也可以使用插件的一些實(shí)例方法，總結(jié)如下。

實(shí)例屬性

options

消息提示框的配置對(duì)象。如:

const msg = ewMessage('這是一個(gè)默認(rèn)的消息提示框');
console.log(msg.options); // { content:"這是一個(gè)默認(rèn)的消息提示框",... }

el

消息提示框的根元素。

closeBtnEl

消息提示框的關(guān)閉元素。

實(shí)例方法

destroy (0.0.6 版本新增)

該方法將會(huì)立即銷(xiāo)毀消息提示框?qū)嵗Ｈ?

const msg = ewMessage('這是一個(gè)默認(rèn)的消息提示框');
msg.destroy(); // 頁(yè)面將不再看到消息提示框

validateHasStyle

該方法驗(yàn)證消息提示框是否含有樣式，如果通過(guò) link 標(biāo)簽導(dǎo)入樣式，則該方法返回 true，否則返回 false。如:

const msg = ewMessage('這是一個(gè)默認(rèn)的消息提示框');
msg.validateHasStyle(); // 假設(shè)頁(yè)面引入了消息提示框的樣式，則返回true

normalizeOptions

該方法規(guī)范化傳入的參數(shù)，并和默認(rèn)配置對(duì)象合并，最終返回一個(gè)消息提示框的配置對(duì)象。

getMessageType

該方法返回消息提示框支持的類(lèi)型值。

getDefaultOption

該方法用于獲取消息提示框的默認(rèn)配置對(duì)象。

addMessageStyle

該方法用于添加消息提示框的樣式，如果傳入了第二個(gè)參數(shù)，將會(huì)將第二個(gè)參數(shù)的樣式作為最終樣式添加到頁(yè)面中，兩個(gè)參數(shù)都是一個(gè)字符串。不同的是，第一個(gè)參數(shù)代表樣式前綴名，第二個(gè)參數(shù)代表一個(gè)樣式字符串。如:

const msg = ewMessage('這是一個(gè)默認(rèn)的消息提示框');
msg.addMessageStyle('ew-', `body { background: #2396ef; }`); // 第一個(gè)參數(shù)實(shí)際上就沒(méi)有什么作用了，頁(yè)面body元素的背景是藍(lán)色
msg.addMessageStyle('el-'); // 會(huì)添加消息提示框的默認(rèn)樣式，但類(lèi)名前綴是el-

render

這個(gè)方法就是渲染消息提示框的核心方法，不需要使用，感興趣可參看源碼。

create

該方法表示創(chuàng)建一個(gè)消息提示框的元素，返回消息提示框的根元素，不需要使用，感興趣可參看源碼。

setTop

該方法用于設(shè)置消息提示框的 top 偏移量，不需要使用，感興趣可參看源碼。

close

該方法用于銷(xiāo)毀一個(gè) dom 元素，傳入 2 個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè) dom 元素或者是 dom 元素集合，第二個(gè)參數(shù)是銷(xiāo)毀的時(shí)間，是一個(gè)數(shù)值。如:

const msg = ewMessage('這是一個(gè)默認(rèn)的消息提示框');
msg.close(msg.el, 1000); // 將在1s后移除元素

內(nèi)置工具函數(shù)接口

插件內(nèi)部提供了一些工具函數(shù)可供調(diào)用，該工具函數(shù)定義在 ewMessage 的靜態(tài)屬性 util 上，我們可以通過(guò)如下代碼來(lái)獲取:

const util = ewMessage.util;
// 以下的util均指這里

isFunction

該工具函數(shù)表示判斷是否是一個(gè)函數(shù)，傳入一個(gè)需要判斷的參數(shù)。如:

const testFn = function () {
  console.log('這是一個(gè)函數(shù)');
};
util.isFunction(testFn); // true
util.isFunction(null); // false

isDom

該工具函數(shù)表示判斷是否是一個(gè) dom 元素，傳入一個(gè)需要判斷參數(shù)。如:

const div = document.querySelector('#app');
util.isDom(div); // true;
util.isDom(1); // false;

isObject

該工具函數(shù)表示判斷是否是一個(gè)對(duì)象，傳入一個(gè)需要判斷的參數(shù)。如:

util.isObject({}); // true;
util.isObject([]); // true;
util.isObject(function () {
  console.log(1);
}); // false;
util.isObject(111); // false;

isString

該工具函數(shù)表示判斷是否是一個(gè)字符串，傳入一個(gè)需要判斷的參數(shù)。如:

util.isString('111'); // true;
util.isString(111); // false

isNumber(0.0.7 版本新增)

該工具函數(shù)表示判斷是否是一個(gè)數(shù)值，傳入一個(gè)需要判斷的參數(shù)。如:

util.isNumber(123); // true;
util.isNumber(NaN); // false;
util.isNumber('1111'); // false

warn

該函數(shù)表示在控制臺(tái)打印一些警告信息，傳入一個(gè)需要打印的信息字符串。如:

util.warn('warning: this is not a function');

hasOwn

該工具函數(shù)表示某個(gè)屬性是否在某個(gè)對(duì)象上，傳入 2 個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)對(duì)象，第二個(gè)參數(shù)是一個(gè)屬性名。如:

const obj = { name: 'eveningwater' };
util.hasOwn(obj, 'name'); // true;
util.hasOwn(obj, 'age'); // false;

toArray

該工具函數(shù)用于將偽數(shù)組轉(zhuǎn)換成真正的數(shù)組，傳入一個(gè)需要轉(zhuǎn)換的值。如:

// 假設(shè)頁(yè)面有多個(gè)<div class="list-item"></div>的元素
const listItems = document.querySelectorAll('.list-item');
util.toArray(listItems); // 一個(gè)包含多個(gè)div元素的數(shù)組

$

該工具函數(shù)用于獲取 dom 元素，有兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)字符串，第二個(gè)參數(shù)是一個(gè) dom 元素。如:

const app = util.$('#app');
util.$('.child', app);

$$

該工具函數(shù)用于獲取 dom 元素集合即 NodeList,參數(shù)同$方法。如:

const app = util.$('#app');
util.$$('.child', app);
util.$$('.child');

createElement(0.0.8 新增)

該工具函數(shù)用于根據(jù)模板字符串創(chuàng)建一個(gè) dom 元素，模板字符串可以帶入子元素，如:

const html = util.createElement(`<div><span></span></div>`);
console.log(html); // 返回div節(jié)點(diǎn)

addClass(0.0.9 新增)

該工具函數(shù)用于給 dom 元素添加類(lèi)名，需要傳入 2 個(gè)參數(shù)，如:

const html = util.addClass(`app`, util.$('#app'));
// 給id為app的元素添加app類(lèi)名

off(0.0.9 新增)

該方法用于給移除一個(gè)事件監(jiān)聽(tīng)器，傳入四個(gè)參數(shù)，第一個(gè)為 DOM 元素，第二個(gè)為事件名，第三個(gè)參數(shù)為事件監(jiān)聽(tīng)器，第四個(gè)參數(shù)為一個(gè)布爾值。如:

const test = document.getElementById('test');
const handler = e => console.log(e.target.tagName);
util.off(test, 'click', handler);

on(0.0.9 新增)

該方法用于添加一個(gè)事件監(jiān)聽(tīng)器，參數(shù)等同 off 方法。如:

const test = document.getElementById('test');
const handler = e => console.log(e.target.tagName);
util.on(test, 'click', handler);

更多詳情參閱文檔官網(wǎng)介紹 ew-message;

更新日志

• 0.0.1 \~ 0.0.4: 添加了消息提示框的基本功能。
• 0.0.5: 修改了 ts 類(lèi)型導(dǎo)入。
• 0.0.6: 消息提示框添加了銷(xiāo)毀 destroy 方法。
• 0.0.7: 完善了 ts 類(lèi)型,新增了最大關(guān)閉時(shí)間屬性 maxDuration,修改了默認(rèn)關(guān)閉時(shí)間。
• 0.0.8: 新增了 showTypeIcon 和 typeIcon 屬性以及 closeIcon，用于配置圖標(biāo),新增了工具方法 createElement。
• 0.0.9: 新增了 container、immediate、removeClassName、removeClassNameSymbol 配置屬性，新增了 on,off,addClass 工具方法。

以上就是typescript封裝消息提示框插件ew-message使用實(shí)戰(zhàn)的詳細(xì)內(nèi)容，更多關(guān)于typescript ew-message封裝的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論