基于vue 2.x的移动端网页弹窗插件wc-messagebox（支持Alert，Confirm，Toast，Loading）

参考文档：GitHub - helicopters/wc-messagebox: 基于 Vue 2.0 开发的 Alert, Toast, Confirm 插件, UI仿照 iOS 原生

①安装插件：yarn add wc-messagebox

②在main.js中加入相关配置，全局引入：

import { Toast, Loading, Alert, Confirm } from 'wc-messagebox'
import 'wc-messagebox/style.css'
	
Vue.use(Toast)
Vue.use(Loading)
Vue.use(Alert)
Vue.use(Confirm)

③使用插件：

toastParams: {
	toastStyle: {
		height: '1.2rem',
		width: '7.5rem',
		lineHeight: '0.8rem',
		fontSize: '0.64rem'
	}
}
• this.$toast('获取成功', this.toastParams)
// toast 的图文混合模式
this.$toast(text, {
	path: path,
	location: 'center',
	toastStyle: {
		height: '100px',
		width: '100px'
	},
	imgStyle: {
		width: '40px',
		marginBottom: '15px'
	}
})
• this.$loading.show('加载中...') // loading
  this.$loading.hide()
• this.$alert('这里是内容')  // 如果只传递一个字符串, 则标题默认为 '提示', 按钮默认为 '确定'
  如果参数为对象, 则可接受如下配置选项:
	title: '这里是标题',
	content: '这里是内容',
	btnText: '这里是按钮',
	component: Component // 用于用户自行指明 Alert 组件
	比如:
  this.$alert({
	title: '我是标题',
	content: '我是内容',
	btnText: '我知道了'
  })
• this.$confirm('这里是内容')
  如果参数为对象, 则可接受如下配置选项:
	title: '这里是标题',
	content: '这里是内容',
	yesStyle: {}, // 设置左边按钮样式
	yesText: '',  // 左边按钮文本,
	noStyle: {},  // 设置右边按钮样式,
	noText: '',   // 设置右边按钮文本
	component: Component // 可不设置, 适用于用户自定义组件
  比如:
  this.$confirm({
	title: '我是标题',
	content: '我是内容',
	yesText: 'OK',
	noText: 'No'
   })