How does VUE directly display the page returned by the backend interface

Go directly to the result:

<template>
    <div class="search">
        <Card>
            <Row>
                <Col>
                    <div>
                        <!--此处为页面显示,src为页面路径-->
                        <!--style样式高度调用calHeight方法进行设置-->
                        <iframe :src="this.url" frameborder="0" width="100%" :style="{height:calHeight}" scrolling="auto"></iframe>
                    </div>
                </Col>
            </Row>
        </Card>
    </div>
</template>
<script>
    import {getCarKeyParameters} from '_p/afs-core-business/api/afs-case/loan-approve/loanAuditVin'
    export default {
        name: "loanAuditVin",
        props: {
            detailParams: {}
        },
        data() {
            return {
               // summaryVisible: false,
                url: '',
            }
        },
        mounted(){
            this.summaryBtn()
        },
        //calHeight 设置高度为窗口高度少100px
        //computed VUE计算属性
        computed : {
            calHeight(){
                return (window.innerHeight - 100) + 'px';
            }
        },
        methods: {
            summaryBtn(){
                var date = this.detailParams.lendingFirstDate.substring(0,18);
                date = this.detailParams.lendingFirstDate.replace(/-/g,'/');
                this.detailParams.loanDate = new Date(date).getTime();
                getCarKeyParameters(this.detailParams).then(res => {
                    if (res.code === '0000') {
                        console.log(res.data.data)
                        //此处为后端接口返回的页面URL
                        this.url = res.data.data.url;
                    }
                })
                    // this.summaryVisible = true;
            },
        }
    }
</script>

<style scoped>
    .search {
        height: 90%;
    }
    .left-div {
        float: left;
        width: 20%;
        height: 600px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
    .left-btn{
        background-color: Transparent;
        font-size:10px;
        border-style :none;
        width: 100%;
        height: 10%;
    }
    .left-link{
        display:block;
        font-size:10px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        color:#000000;
        width:100%;
        height: 10%;
        text-align:center;
        padding:4px;
        text-decoration:none;
    }
    .right-div{
        float: right;
        width: 78%;
        height: 550px;
    }
</style>

 

Guess you like

Origin blog.csdn.net/qq_42857603/article/details/107596406