mpvue实现自定义带有输入框的弹框

效果图

html

  

  

    

      
请指定手机号
      
    
    

      
取消
      
确定发送
    
  

script部分

export default {
    name: "reliefInsureInfo.vue",
    props: ['noCarProposalInfo','imageInfo'],
    data(){
      return{
        changeModel: true,
        isModel: true,
        phoneNumber: '',
      }
    },
    watch:{
    },
    methods:{
      // 打开输入手机号的模态框
      tapSendTele(){
        this.changeModel = !this.changeModel;
        this.isModel = !this.isModel;
      },
      //  弹框取消
      tapCancel(){
        this.phoneNumber = '';
        this.changeModel = !this.changeModel;
        this.isModel = !this.isModel;
      },
      //  确认发送
      confirmSend(){
        console.log(this.phoneNumber);
        this.changeModel = !this.changeModel;
        this.isModel = !this.isModel;
        this.$emit('confirmSend',this.phoneNumber);
        this.phoneNumber='';
      },
     }
  };

css部分

.modalMask {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: #000;
      opacity: 0.5;
      overflow: hidden;
      z-index: 9000;
      color: #fff;
    }
    .modalDialog {
      box-sizing: border-box;
      width: 560px;
      // height: 330px;
      overflow: hidden;
      position: fixed;
      top: 50%;
      left: 0;
      z-index: 9999;
      background: #fff;
      margin: -180px 95px;
      border-radius: 8px;
      .modalContent {
        box-sizing: border-box;
        display: flex;
        padding: 50px 53px;
        font-size: 36px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .contentTip{
          text-align: center;
          font-size: 36px;
          color: #333333;
        }
        .teleStyle{
          background: #FFFFFF;
          border: 1px solid #979797;
          border-radius: 6px;
          line-height: 50px;
          height: 50px;
          box-sizing: border-box;
          padding-left: 12px;
          width: 460px;
          font-size: 28px;
          /*color: rgba(0,0,0,0.25);*/
          margin-top: 30px;
        }
      }
      .modalFooter {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        height: 100px;
        border-top: 1px solid #E5E5E5;
        font-size: 36px;
        line-height: 100px;
      }
      .btnCancel {
        width: 50%;
        font-size: 36px;
        color: #333;
        text-align: center;
        border-right: 1px solid #E5E5E5;
      }
      .btnConfirm {
        font-size: 36px;
        width: 50%;
        color: #508CEE;
        text-align: center;
      }
    }