mint-ui MessageBox
vue 2017-11-13 09:55:03

将二次确认框统一封装为store / Vuex中，因为大部分工程会将vuex别名为store，这里注明一下。

1、store分模块，common公共方法：

JavaScript Code复制内容到剪贴板
  1. const actions = {  
  2.   
  3.       
  4.     /** 
  5.      * 二次确认框 
  6.      * params{ 
  7.      *   message : 确认文本 
  8.      *   title : 标题 
  9.      *   confirm : 确定按钮 
  10.      *   cancle : 取消按钮 
  11.      * } 
  12.      */  
  13.     confirmMessageBox({ state, commit }, params){  
  14.         let messageTips = params.hasOwnProperty("message")?params.message:"是否确认",  
  15.         title = params.hasOwnProperty("title")?params.title:"",  
  16.         confirmButtonText = params.hasOwnProperty("confirm")?params.confirm:"确定",  
  17.         cancelButtonText = params.hasOwnProperty("cancle")?params.cancle:"取消";  
  18.           
  19.         return new Promise(function (resolve, reject) {  
  20.               
  21.             MessageBox.confirm('', {  
  22.                 title:title,  
  23.                 message: messageTips,    
  24.                 confirmButtonText: confirmButtonText,    
  25.                 cancelButtonText: cancelButtonText  
  26.             }).then(action => {  
  27.                 resolve(true);  
  28.             }).catch(err => {  
  29.                 resolve(false);  
  30.             })  
  31.         })  
  32.           
  33.     },  
  34.   
  35. }  

 

调用方法：

JavaScript Code复制内容到剪贴板
  1. <template>  
  2.     <button @click="toRefund">退款</button>  
  3. </template>  
  4.   
  5.   
  6. <script>  
  7.     export default {  
  8.         name: "test",  
  9.         methods: {  
  10.             async toRefund() {  
  11.                   
  12.   
  13.                 let msgParams = {  
  14.                     "message" : "是否确认退费",  
  15.                 }  
  16.                 let res = await this.$store.dispatch("common/confirmMessageBox", msgParams);  
  17.                 if(!res){  
  18.                     return false;  
  19.                 }  
  20.   
  21.   
  22.             },  
  23.         },  
  24.   
  25.     };  
  26. </script>  

 

 

 

默认提示框：

JavaScript Code复制内容到剪贴板
  1. import { MessageBox } from 'mint-ui'  
  2.   
  3. MessageBox('提示', '操作成功');  

 

1.jpg

JavaScript Code复制内容到剪贴板
  1. import { MessageBox } from 'mint-ui'  
  2. import { Toast } from 'mint-ui'  
  3.   
  4. export default {  
  5.     name: 'publishBase',  
  6.     methods: {  
  7.         publishFree() {  
  8.   
  9.             MessageBox.confirm('', {  
  10.                 title: '提示',  
  11.                 message: '发布此内容需将个人信息补充完整',  
  12.                 confirmButtonText: '去补充',  
  13.                 cancelButtonText: '取消'  
  14.             }).then(action => {  
  15.                 if(action == 'confirm') {  
  16.                     if(userLevel == this.$store.state.common.averageUser) {  
  17.                         // 普通用户跳转进入个人信息补充页user-07  
  18.                         window.location.href = '#';  
  19.                         //this.$router.push('/cms/publish-base/' + type);  
  20.                     } else if(userLevel == this.$store.state.common.primaryUser) {  
  21.                         // 初级用户跳转进入个人信息补充页user-07-02  
  22.                         window.location.href = '#';  
  23.                         //this.$router.push('/cms/publish-base/' + type);  
  24.                     }  
  25.                 }  
  26.             }).catch(err => {  
  27.                 //Toast('您已取消补充信息');  
  28.             });  
  29.             return false;  
  30.   
  31.         },  
  32.     }  
  33. }  

 

JavaScript Code复制内容到剪贴板
  1. //删除发布  
  2. this.$messagebox.confirm('', {  
  3.     message: '是否确定删除？',  
  4.     confirmButtonText: '确定',  
  5.     cancelButtonText: '取消'  
  6. }).then(action => {  
  7.   
  8.     let params = {  
  9.         publish_id: id,  
  10.         userId: this.$store.state.common.userId  
  11.     };  
  12.   
  13.     this.request.post(this.$store.state.cms.api.deletePublish, params).then(response => {  
  14.         if(!response) {  
  15.             return false;  
  16.         }  
  17.         let res = response;  
  18.         this.publishList.splice(index, 1);  
  19.         let instance = this.$toast('删除成功');  
  20.         setTimeout(() => {  
  21.             instance.close();  
  22.         }, 1000);  
  23.   
  24.         // success callback  
  25.     })  
  26.   
  27. }).catch(err => {  
  28.     //this.$toast('您已取消删除');    
  29. })  

 

 

2.jpg

JavaScript Code复制内容到剪贴板
  1. import { MessageBox } from 'mint-ui'  
  2. import { Toast } from 'mint-ui'  
  3.   
  4.   
  5.             MessageBox.confirm('', {  
  6.                     message: '已保存至草稿箱',  
  7.                     confirmButtonText: '去草稿箱',  
  8.                     cancelButtonText: '返回'  
  9.                 }).then(action => {  
  10.                       
  11.                     this.$router.push('/cms/publish-base/' + type);  
  12.                       
  13.                 }).catch(err => {  
  14.                     Toast('您已取消补充信息');  
  15.                 });  

 

 QQ截图20171121162331.jpg

上面的是CSS样式发生了变化，代码还是mint ui的，没变化，点击确定后的事件：

JavaScript Code复制内容到剪贴板
  1. this.$messagebox({  
  2.           title:"提示", // 标题，可为空，默认为：提示
  3.           message: '响应失败，请联系管理员',  
  4. }).then(action => {  
  5.     alert(0);         
  6.     //this.$router.go(-1); //取消返回上一个路由地址              
  7. });  

 

禁用点击遮罩层关闭messagebox框

JavaScript Code复制内容到剪贴板
  1. this.$messagebox.confirm('', {  
  2.     message: '是否确定删除？',  
  3.     confirmButtonText: '确定',  
  4.     cancelButtonText: '取消',  
  5.     closeOnClickModal: false, //取消点击遮罩层关闭提示框  
  6. }).then(action => {  
  7.     // 点击确定事件回调  
  8.   
  9. }).catch(err => {  
  10.     // let instance = this.$toast('删除成功');    
  11.     //  setTimeout(() => {    
  12.     //      instance.close();    
  13.     //  }, 1000);     
  14. })  

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/200.html

上一篇 mint-ui Datetime picker组件 / 时间选择器
下一篇 vue router 路由组件
相关的文章
Powered by yoyo苏ICP备15045725号