微信小程序自定义弹框页面

奋斗的七月

用法：

      this.$refs.verifyPhones.showDialogBtn();

组件内部代码：

<template>

  <div class='containerPromotion' @click="clickCell">

    <!--弹窗-->
    <div class="modal-mask" @tap="hideModal" catchtouchmove="preventTouchMove" v-if="showModal"></div>
    <div class="modal-dialog" v-if="showModal">
        <div class="modal-title">验证手机号</div>
        <div class="modal-content">
            <div class="modal-input">
                <div class="modal-input-div">
                    <p class="text">手机号</p>
                    <input placeholder-class="input-holder" type="number"  @input="inputValuePhone" maxlength="11"  class="input" placeholder="请输入手机号">
                </div>
                <div class="modal-input-div">
                    <p class="text">验证码</p>
                    <input placeholder-class="input-holder" type="number" @input="inputValueCode"  maxlength="6"  class="input" placeholder="请输入验证码">
                    <p class="btn-text" @tap="onClickBtn">{{theString}}</p>
                </div>      
            </div>
        </div>
        <div class="modal-footer">
            <div class="btn-cancel" @tap="onCancel" data-status="cancel">取消</div>
            <div class="btn-confirm" @tap="onConfirm" data-status="confirm">确定</div>
        </div>
    </div>

  </div>

</template>

<script>
export default {
  props: {
    item: Object
  },
  data() {
    return {
      showModal: false,
      timer: "",
      timerNum: 59,
      theString: "获取验证码",
      phoneNum: "",
      codeNum: ""
    };
  },
  onLoad: function() {},
  onUnload() {
    clearInterval(this.timer);
  },
  methods: {
    /**
     * 弹窗
     */
    showDialogBtn: function() {
      // this.setData({
      //   showModal: true
      // });
      this.showModal = true;
    },
    /**
     * 弹出框蒙层截断touchmove事件
     */
    preventTouchMove: function() {},
    /**
     * 隐藏模态对话框
     */
    hideModal: function() {
      this.showModal = false;
      clearInterval(this.timer);
      this.timerNum = 59;
      this.theString = "获取验证码";
    },
    /**
     * 对话框取消按钮点击事件
     */
    onCancel: function() {
      this.hideModal();
    },
    /**
     * 对话框确认按钮点击事件
     */
    onConfirm: function() {
      if (this.phoneNum == "") {
        return this.$toast("请输入手机号");
      }
      if (this.phoneNum.length != 11) {
        return this.$toast("请输入正确手机号");
      }
      if (this.codeNum == "") {
        return this.$toast("请输入验证码");
      }
      this.hideModal();
    },
    inputValuePhone: function(e) {
      this.phoneNum = e.target.value;
    },
    inputValueCode: function(e) {
      this.codeNum = e.target.value;
    },
    /**
     * 获取验证码
     */
    onClickBtn: function() {
      if (this.phoneNum == "") {
        return this.$toast("请输入手机号");
      }
      if (this.phoneNum.length != 11) {
        return this.$toast("请输入正确手机号");
      }
      if (this.theString != "获取验证码") {
        return;
      }
      this.$toast("验证码发送成功");
      this.timer = setInterval(() => {
        this.theString = this.timerNum-- + "后重新发送";
        if (this.timerNum == 0) {
          clearInterval(this.timer);
          this.timerNum = 59;
          this.theString = "获取验证码";
        }
      }, 1000);
    }
  }
};
</script>

<style scoped>
.show-btn {
  margin-top: 100rpx;
  color: #22cc22;
}

.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}

.modal-dialog {
  /* width: 540rpx; */
  width: 86%;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 9999;
  background: #f9f9f9;
  /* margin: -180rpx 105rpx; */
  margin-left: 7%;
  margin-top: -180px;
  border-radius: 36rpx;
}

.modal-title {
  padding-top: 50rpx;
  font-size: 36rpx;
  color: #030303;
  text-align: center;
}

.modal-content {
  padding: 10rpx 32rpx 30rpx 32rpx;
}

.modal-input {
  display: flex;
  background: #fff;
  /* border: 2rpx solid #ddd; */
  border-radius: 4rpx;
  font-size: 28rpx;
  flex-direction: column;
  background: #f9f9f9;
}

.modal-input-div {
  display: flex;
  /* background: #fff; */
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #f9f9f9;
  margin-top: 20px;
  /* border: 2rpx solid #ddd; */
  /* border-radius: 4rpx; */
  /* font-size: 28rpx; */

  height: 40px;
}
.text {
  flex: 0 0 60px;
  background: #f9f9f9;
  text-align: left;
}
.btn-text {
  background-color: #fd4343;
  width: 60px;
  height: 40px;
  flex: 0 0 100px;
  color: white;
  border-radius: 40px;
  margin-left: 20px;
  line-height: 40px;
}
.input {
  width: 100%;
  height: 82rpx;
  font-size: 28rpx;
  line-height: 28rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  color: #333;
  border: 2rpx solid #ddd;
  background-color: white;
  text-align: left;
}

input-holder {
  color: #666;
  font-size: 28rpx;
  /* background-color: white; */
  /* text-align: left; */
}

.modal-footer {
  display: flex;
  flex-direction: row;
  height: 86rpx;
  border-top: 1px solid #dedede;
  font-size: 34rpx;
  line-height: 86rpx;
  margin-top: 20px;
}

.btn-cancel {
  width: 50%;
  color: #666;
  text-align: center;
  border-right: 1px solid #dedede;
}

.btn-confirm {
  width: 50%;
  color: #fd4343;
  text-align: center;
}
</style>

需要注意的地方

1、蒙层view中绑定的preventTouchMove函数是一个空函数，使用了catch事件，目的就是阻止touchmove这样一个冒泡事件继续向下传递。

2、蒙层的wxss样式中，指定其大小为100%以占满整个屏幕。

3、模态对话框与蒙层的wxss样式中均有z-index属性，为的是保证对话框始终浮在蒙层的上方（即对话框的z-index始终要比蒙层的大）