vue 如何在iframe中显示一个全屏的弹窗

<script type="text/html" id="openPayPopup">
    <div id="open-pay-popup" class="open-pay-popup-pop">
        <div class="header">
            <span>选择支付</span> 
            <span @click="close"></span>    
        </div>
        <div class="center">
            <div class="form-item">
                <label>支付类型：</label>
                <div>
                    <input type="radio"  value="0" id="pay1"/>
                    <label for="pay1">支付宝</label>
                    <input type="radio"  value="1" id="pay2"/>
                    <label for="pay2">微信</label>
                </div>    
            </div>
        </div>
        <div>
            <span class="confirm-btn" @click="submit">确定</span>
            <span class="cancel-btn" @click="close">取消</span>
        </div>
    </div>
</script>

 

将组件挂载到body中 

var OpenScanPayPopup = Vue.extend({
        template: "#openPayPopup",
        data: function () {
            return {
                info: null
            }
        }
})


var vm = new Vue({
    data: function () {
        return {
            scanPayStatusInfo: {}
        }
    },
    created: function () {
        var oOpenScanPayPopup = new OpenScanPayPopup();
        oOpenScanPayPopup.info = this.scanPayStatusInfo;
top.document.getElementsByTagName('body')[0].appendChild(oOpenScanPayPopup.$mount().$el);   
    }
})