基于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'
   })