通过主服务 newframework 生成

使用方式

// vuejs
import myfamsTipShow from 'myfams-tip-show'
console.log(myfamsTipShow)
myfamsTipShow({
  type: 'error',
  message: '我是错误'
})
myfamsTipShow({
  type: 'error',
  message: '我是错误'
})
myfamsTipShow({
  type: 'success',
  message: '我是成功'
})
myfamsTipShow({type: 'warning', message: '我是警告', duration: 10e3})

// index.html
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.14.0/theme-chalk/index.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.0/vue.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.14.0/index.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js'></script>
<script src="./myfams-tip-show.umd.min.js"></script>

window["myfams-tip-show"]({
  type: 'error',
  message: '我是错误'
})
window["myfams-tip-show"]({
  type: 'success',
  message: '我是成功'
})
window["myfams-tip-show"]({ type: 'warning', message: '我是警告', duration: 10e3 })

库大小

Nginx Gzip 下 463B 和 普通的 boostrap table 中的 table editable 差不多 资源大小 835KB

生成来源

根目录下 npx vue-cli-service build --target lib --name myfams-tip-show.umd ./src/helper/js/message-box/message.ts

也可直接执行 npm run build:myfams-tip-show

生成文件会在 dist 目录下

 demo.html
 myfams-tip-show.common.js
 myfams-tip-show.umd.js
 myfams-tip-show.umd.min.js

说明

本案例中的 index.html 做了小小的改动添加了需要的依赖