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

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

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

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

//樣式引入
// 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';
//  導入樣式
import 'ew-message/dist/ew-message.min.css';
const msg = ewMessage(option); //option為配置對象，詳情見前述

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

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

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

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

const msg = ewMessage({
  content: '這是一個默認的消息提示框',
  center: true,
  type: 'success',
  duration: 2000 // 消息提示框將在2s后關閉
});

const msg = ewMessage({
  content: '這是一個默認的消息提示框',
  center: true,
  type: 'success',
  duration: 120000,
  maxDuration: 10000 // 最大關閉時間設置的是10s，因此消息提示框將在10s后關閉，而不是12s后關閉
});

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

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

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

const msg = ewMessage({
  content: '這是一個默認的消息提示框',
  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>'
});

// 不推薦替換默認的圖標
const msg = ewMessage({
  content: '這是一個默認的消息提示框',
  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>'
});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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