Vue

Vue 使用promise方法实现弹窗

联系站长 作者:web知道 来源:未知 2020-09-11 09:37 我要评论

Vue 使用promise方法实现弹窗...

组件
<template>
      <div class="auditBox">
            <div class="backgroundColor" v-if="isShow" @click="handleAction('close')"></div>
            <div class="messageBox" v-if="isShow">
                  <div class="title"><span class="titleClass">{{title}}</span><i class="el-icon-close closeClass" @click="handleAction('close')"></i></div>
                  <div style="overflow:hidden;line-height:24px;padding:15px 15px">
                        <i :class="['el-icon-'+type,'yellow']"></i><span class="hint">{{content}}</span>
                  </div>
            <div class="btnClass">
                  <el-button @click="handleAction('cancel')">{{cancel}}</el-button>
                  <el-button type="primary" @click="handleAction('confirm')">{{confirm}}</el-button>
            </div>
            </div>
      </div>
</template>
 
<script>
export default {
      name: "MyConfirm",
      data(){
            return {
                  isShow:false,
                  title:'',
                  content:'',
                  confirm:'确定',
                  cancel:'取消',
                  type:'warning',
                  promiseStatus:null,
            }
      },
      methods:{
            auditBoxBtn(val) {
                  let _this = this
                  this.isShow = true;
                  return new Promise(function (resolve, reject) {
                  _this.promiseStatus = {resolve, reject};
                  });
            },
            handleAction(action){
                  this.isShow = false;
                  if(action == 'confirm'){
                        this.promiseStatus && this.promiseStatus.resolve();
                  }else if(action == 'cancel'){
                        this.promiseStatus && this.promiseStatus.reject();
                  }
            }
      }
}
</script>
<style scoped>
.closeClass{
float:right;
cursor:pointer
}
.btnClass{
text-align:right;
padding:0px 15px
}
.title{
padding:15px 15px 5px
}
.titleClass{
font-size: 18px;
line-height: 1;
color: #303133;
}
.backgroundColor{
z-index:998;
position:fixed;
left:0;
top:0;
width:100%;
height:2000px;
background:rgba(128,128,128,0.4)
}
.yellow{
display: block;
float:left;
color:#e6a23c;
font-size:24px;
}
.hint{
display: block;
padding-left:40px;
}
</style>
<style>
.auditBox .messageBox{
background-color:#fff;
border-radius:5px;
position:fixed;
top:20%;
left:50%;
transform:translate(-50%,-50%);
width:422px;
height:140px;
z-index:999;
}
.auditBox .messageBox .el-dialog__header{
padding:12px 20
JS
import Vue from 'vue'
import AuditComponent from './auditBox.vue'
 
const auditBox = Vue.extend(AuditComponent); //创建模板
 
AuditComponent.install = (content, title, options) => {
     if (typeof title === 'object') {
         options = title;
          title = '';
     } else if (title === undefined) {
          title = '';
     }
 
     options = Object.assign({
          title: title,
          content: content,
     }, options);
 
     let instance = new auditBox({
          data: options
     }).$mount();    //创建实例
 
     document.body.appendChild(instance.$el);//挂载实例
 
     return instance.auditBoxBtn();  //调用实例方法
};
 
export default AuditComponent
 
调用
import AuditComponent from '@/views/module/auditBox.js'
Vue.prototype.$myConfirm = AuditComponent.install

this.$myConfirm('测试, 是否继续?','提示',{
      confirm:'通过',
      cancel:'不通过',
      type: 'warning'
}).then(() => {
      console.log('通过')
}).catch(() => {
      console.log('不通过')
}) 



简单版本
import component from './Cmponent.vue'
const component = {
     install:function(Vue){
            Vue.component('component-name',component)
     }
    //'component-name'这就是后面可以使用的组件的名字,install是默认的一个方法 component-name 是自定义的,我们可以按照具体的需求自己定义名字
}
// 导出该组件
export default component



本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评