vue-message-mask

a message mask plugin for vue

demo

Install

 npm install vue-message-mask --save

Using the vue-message-mask in component

 import VueMessageMask from 'vue-message-mask'
 Vue.use(VueMessageMask)
 ...
 <template>
   <div @click="showloading">hello world</div>
 </template>
 <script>
   export default{
     methods:{
       showloading(){
         this.VueMessageMask.showVMaskLoading("hello world")
       }
     }
   }
 </script>

API

  var message = 'hello world'
  //关闭遮罩层
  this.closeVMask(callback) // callback 为可选参数

  //显示loading
  this.VMaskController.showVMaskLoading({loadingText:message})

  //显示单按钮文字信息
  this.VMaskController.showVMaskMsg(message)

  //自定义按钮文字
  this.VMaskController.showVMaskMultiMsg({
                      message:this.message,
                      showOkButton:true,
                      okText:'知道了',
                      okAction:()=>{
                          //okAction 为可选参数
                          console.log('点击了知道按钮')
                      }
                  })

  //confirm类型弹出框
  this.VMaskController.showVMaskMultiMsg({
                      message:this.message,
                      showOkButton:true,
                      showCancelButton:true,
                      okText:'知道了',
                      cancelText:'取消',
                      okAction:()=>{
                      //okAction 为可选参数
                          console.log('点击了确认按钮')
                      },
                      cancelAction:()=>{
                      //cancelAction 为可选参数
                          console.log('点击了取消按钮')
                      }
                  })

  //自定义vue组件弹出框
  //diy.vue
       <template>
           <div style="width:200px;background-color:#fff;text-align: center;padding: 5px;line-height: 20px">
               自定义的弹框内容<br/>
               测试自定义内容的正确显示<br/>
               默认宽度不能超过屏幕宽度<br/>
               默认上下左右居中<br/>
               <button @click="closemask()" style="    border: 1px solid #3bab20;padding: 5px;background-color: #3bab20;color: #fff;margin-top: 10px">点击关闭自定义窗口</button>
           </div>
       </template>
       <script>
           export default{
               methods:{
                   closemask(){
                       this.VMaskController.closeVMask()
                   }
               }
           }
       </script>

   //调用层
       import Diy from 'diy.vue'
       ...
       this.VMaskController.showDiyVMask(Diy)

OPTIONS

Option|Type's|Default|Description -----|-----|-----|----- showMask|Boolean|false|显示或关闭主遮罩层 loadingText|String|'loading...'|loading文字 showLoading|Boolean|false|是否展示loading组件 showLoadingCloseButton|Boolean|false|是否展示loading组件的关闭按钮 showMessage|Boolean|false|是否展示信息图层 message|String|''|信息图层文字 showOkButton|Boolean|false|是否展示信息图层的确定按钮 showCancelButton|Boolean|false|是否展示信息图层的取消按钮 okAction|Function|null|信息图层确定按钮回调事件 cancelAction|Function|null|信息图层取消按钮回调 okText|String|'确认'|信息图层确定按钮文字 cancelText|String|'取消'|信息图层取消按钮文字 diyComponent|Object|null|自定义图层组件