typescript封装消息提示框插件ew-message使用实战

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; //消息提示框内容，必传参数
  center?: boolean; //消息提示框内容是否居中
  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; // 移除消息提示框动画类名，目前内置动画类名值: 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: '这是一个默认的消息提示框' });

// 消息提示框内容居中
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(); // 内部会自动获取配置对象并渲染

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; }`); // 第一个参数实际上就没有什么作用了，页面body元素的背景是蓝色
msg.addMessageStyle('el-'); // 会添加消息提示框的默认样式，但类名前缀是el-

const msg = ewMessage('这是一个默认的消息提示框');
msg.close(msg.el, 1000); // 将在1s后移除元素

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

const testFn = function () {
  console.log('这是一个函数');
};
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元素的数组

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节点

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);