vue移动端模态框可传参

共计 6180 个字符，预计需要花费 16 分钟才能阅读完成。

1- 封装模态框组件 Mydialog (样式可以自己写)

<template>
  <transition name="modal" tag="div">
    <div class="modal" v-show="visible" transition="fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <!-- 头部 -->
          <div class="modal-header">
            <slot name="header">
              <!-- <p class="title">{{modal.title}}</p> -->
            </slot>
            <a @click="close(0)" class="xd xd-close" href="javascript:void(0)"></a>
          </div>
          <!-- 内容区域 -->
          <div class="modal-body">
            <slot name="body">
            </slot>
          </div>
          <!-- 尾部, 操作按钮 -->
          <div class="modal-footer">
            <slot name="footer">
              <slot name="button" class="footer">>
                <a v-if="modal.showCancelButton" href="javascript:void(0)" class="button" :class="modal.cancelButtonClass" @click="close">{{modal.cancelButtonText}}</a>
                <a v-if="modal.showConfirmButton" href="javascript:void(0)" class="button" :class="modal.confirmButtonClass" @click="close()">{{modal.confirmButtonText}}</a>
              </slot>
            </slot>
          </div>
        </div>
      </div>
    </div>
    <!-- <div v-show="show" class="modal-backup"></div> -->
  </transition>
</template>

<script>
export default {
  props: {visible: { type: Boolean, default: false},
    options: {
      type: Object,
      default: {}}
  },
  // 采用 v -bind 将 visible 传入
  methods: {ConfirmHandler () {this.$emit('update:visible', false);    // 更新 visible 的值（可选，如果想点击确认之后，进行一些处理再决定关不关闭，可取消在这里更新 visible）this.$emit('Confirm');    // 传递确认事件
    },
    CancelHandler () {this.$emit('update:visible', false);    // 更新 visible 的值
      this.$emit('Cancel');    // 传递取消事件
    },
    close () {this.visible = false;}
  },
  /**
   * modal 模态接口参数
   * @param {string} modal.title 模态框标题
   * @param {boolean} modal.showCancelButton 是否显示取消按钮
   * @param {string} modal.cancelButtonClass 取消按钮样式
   * @param {string} modal.cancelButtonText 取消按钮文字
   * @param {string} modal.showConfirmButton 是否显示确定按钮
   * @param {string} modal.confirmButtonClass 确定按钮样式
   * @param {string} modal.confirmButtonText 确定按钮标文字
   */
  computed: {
    /**
     * 格式化 props 进来的参数, 对参数赋予默认值
     */
    modal () {
      let modal = this.options;
      if (modal) {
        modal = {
          title: modal.title || '提示',
          showCancelButton: typeof modal.showCancelButton == 'undefined' ? true : modal.showCancelButton,
          cancelButtonClass: modal.cancelButtonClass ? modal.showCancelButton : 'btn-default',
          cancelButtonText: modal.cancelButtonText ? modal.cancelButtonText : '取消',
          showConfirmButton: typeof modal.showConfirmButton == 'undefined' ? true : modal.cancelButtonClass,
          confirmButtonClass: modal.confirmButtonClass ? modal.confirmButtonClass : 'btn-active',
          confirmButtonText: modal.confirmButtonText ? modal.confirmButtonText : '确定',
        };
      } else { // 使用时没有传递参数
        modal = {
          title: '提示',
          showCancelButton: true,
          cancelButtonClass: 'btn-default',
          cancelButtonText: '取消',
          showConfirmButton: true,
          confirmButtonClass: 'btn-active',
          confirmButtonText: '确定',
        };
      }
      return modal;
    },
  },

}
</script>

<style lang="scss" scoped>
.modal-enter-active {animation: modal-in 0.35s linear;}

.modal-leave-active {animation: modal-in 0.35s reverse linear;}

@keyframes modal-in {
  0% {transform: translateY(-20px) rotateX(-35deg);
    opacity: 0;
  }
  50% {opacity: 0.5;}
  100% {transform: translateY(0) rotateX(0);
    opacity: 1;
  }
}

.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  outline: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  width: 608px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 24px 7px rgba(0, 0, 0, 0.11);
  z-index: 1002;
  overflow: hidden;

  .modal-content {
    > div {// padding: 0.15rem 0.4rem;}
    .modal-header {background: url("../assets/images/tournaments/1.png") no-repeat;
      background-size: cover;
      height: 70px;
      img {width: 100%;}
    }
    .modal-body {
      // padding: 90px 0 72px 0;
      color: #3c3c43;
      font-size: 25px;
      border-bottom: 1px solid #bdbdbd;
      font-weight: 500;
    }
    .footer {
      a {
        font-size: 30px;
        color: #2c2c2c;
      }
    }
    .modal-footer {
      padding: 30px 0 40px 0;
      color: #3c3c43;
      font-size: 30px;
      font-weight: 500;
    }
  }
}

.modal-backup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
}
</style>

2- 使用方法 1
页面中引入在进行调用

(1) import Mydialog from '../carrer/mydialog.vue';
(2)引入组件
 components: {Mydialog}（3）在 html 中插入组件
 <Mydialog v-show="isShowDialog" :dialog-option="dialogOption" ref="mydialog"></Mydialog>

data 中的参数

 showDialog: false,
      dialogOption: {
        text: '欢迎',
        cancelButtonText: '否',
        confirmButtonText: '是',
        isShowCancelButton: ''
    },

methods 中在需要出现弹框时候让其显示就好啦

 showDialog()
      this.dialogOption.text = ` <p> 确认拒绝？</p> `;
      this.dialogOption.isShowCancelButton = true
      this.showDialog = true;
      this.$refs.mydialog.confirm().then(() => {
        this.showDialog = false;
        this.refuse(id)
      }).catch(() => {this.showDialog = false;})
    },

3. 使用方法 2
因为在项目中经常要使用到，而且每次使用的时候都要带上相同的参数，所以就封装了一个 js，（模态框的工具类），使用的时候调用就好了

1)- 新建一个 js 文件 dialogUtil，复制下面的代码就好了

class normalDialog {constructor(args) {// console.log("args",args);
    this.parent = args.parent;
    this.isShowDialog = args.isShowDialog;
    this.dialogOption = this.parent[args.dialogOption];
    this.mydialog = this.parent.$refs[args.mydialog];
    // console.log("dialogOption=",this.dialogOption);
  }

  showDialog(text, showCancelButton, success, error) {console.log("showDialog=="+text);
    this.dialogOption.text = text || "请输入弹框标题";
    let suc = typeof showCancelButton == "function" ? showCancelButton : success;
    let err = typeof showCancelButton == "function" ? success : error;
    if (typeof showCancelButton != "function") {this.dialogOption.isShowCancelButton = !!showCancelButton;} else {this.dialogOption.isShowCancelButton = true;}
    this.parent[this.isShowDialog] = true;
    this.confirm(suc, err);
  }

  // 弹框回调
  confirm(success, error) {
    let self = this;
    this.mydialog.confirm().then(() => {typeof success == "function" && success();
      self.parent[this.isShowDialog] = false;
    }).catch(() => {typeof error == "function" && error();
      self.parent[this.isShowDialog] = false;
    })
  }

  toString() {// console.log(this.name + ":" + this.age);
  }

}


export default {
  //args：参数，类型
  creatByType(args, type) {
    type = !!type ? type : 1;

    switch (type) {
      case 1:
        return new normalDialog(args)
        break;
      case 2:
        break
      default:
        break;
    }
  }
}

2) 因为很多页面都用到，所以让他成为全局的（在 main 中引入就好了），那么别的页面使用就不需要引入了

import dbDiaLogUtil from './assets/js/dialogUtil'
Vue.prototype.$dbDiaLogUtil = dbDiaLogUtil;

3)在使用的时候
页面中引入组件在进行调用

(1) import Mydialog from '../carrer/mydialog.vue';
(2)引入组件
 components: {Mydialog}（3）在 html 中插入组件
 <Mydialog v-show="isShowDialog" :dialog-option="dialogOption" ref="mydialog"></Mydialog>

在 data（）中用对象的形式

    isShowDialog : false,
      dialogOption:{text: '',cancelButtonText:' 否 ',confirmButtonText:' 确认 ',isShowCancelButton: false},
      dialogNormal:null,

在 mounted 中进行初始化

    this.dialogNormal = this.$dbDiaLogUtil.creatByType({parent:this,isShowDialog:'isShowDialog',dialogOption:'dialogOption',mydialog:'mydialog'});

最后在需要弹框的地方调用，一句代码搞定啦

        this.dialogNormal.showDialog('dialog 要显示的内容',function(){console.log('成功执行的')} , function(){console.log('失败执行的')})

初来乍到，如有不对的还请指教 …

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）