Mint-UI中的Message-box中是否可以判断弹出框内输入的内容？

Question

项目是用的是vue2.0 + vue-cli + mint-ui。在公司的需求中，我需要通过一个按钮点击后，弹出Message box,Message box内需要填写手机号，并发送至后台。但是在实现的过程中，发现Message box内的input的值绑定不上vue中的属性，进行不了正则验证(并显示相应的提示文字)，也获取不到里面输入的值。

有没有朋友能指点一下？

代码：

<span @click="backList">点击按钮</span>

import Vue from 'vue';
import { MessageBox } from  'mint-ui';

data() {
    return {
        cc : '',
        isShowPhoneError : true,
        reg : /^1\d{10}$/,
        inputtext : {
            phone : ''
        }
    }
}
methods: {
    backList(){
        let that = this;
        MessageBox({
            message: `<div class="homeTelPhone">
                    <input type="tel" class="home_input" placeholder="联系方式" ref=homeTel @blur="homeTel()" maxlength="11" v-model="inputtext.phone"/>
                    <span class="home_num_error" v-show="isShowPhoneError"  style="font-size:.26rem; box-shadow: 0 0 0 0;">请输入正确的联系方式</span>
                </div>`,
            confirmButtonText:'提交'
        }).then(action => {
            that.$router.push({ path: '/home' });
        })
    }，
    homeTel(){                    // 整个方法没有被执行
        let telValue = this.$refs.homeTel.value;
        console.log(telValue)
        // 对比input内的值是否符合
        if(this.reg.test(telValue)){
            this.isShowPhoneError = true;
            this.cc = true;
            console.log('1')
        }else{
            this.isShowPhoneError = true ;
            this.cc = false;
            console.log('2')
        }
    }
}

Answer 1

参考以下链接，已解决
https://github.com/ElemeFE/vu...

Answer 2

MessageBox还可以这么玩呢？这样我觉得可以手写一个弹出层，扩展性更强，MessageBox好像不是干这事的