<!--外部超链接-->
<template>
    <div id="ifmLinkContrainer">
        <div style="position: absolute;top:0;bottom:0;left:0;right:0;box-sizing: border-box;"
             v-loading="loading"
             element-loading-text="正在加载，请稍后..."
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.6)"
             element-loading-custom-class="ifmLink-load">
            <iframe :src="url" style="height:100%;width:100%;" frameborder="0" :class="{'show-iframe':showIframe}"
                    @load="onLoad"></iframe>
            <!--             element-loading-text="页面君正在快马加鞭的赶过来~ φ(≧ω≦*)♪"-->
        </div>
    </div>
</template>

<script>
    export default {
        name: "ifmLink",
        props: {
            linkUrl: ""
        },
        data(){
            return{
                url : this.linkUrl ? this.linkUrl : '',
                loading: true,
                showIframe: false,
            }
        },
        watch: {
            linkUrl() {
                this.url = this.linkUrl ? this.linkUrl : '';
            },


        },
        methods: {
            onLoad() {
                this.loading = false;
                this.showIframe = true;
            }
        },
    }
</script>

<style scoped lang="scss">
    #ifmLinkContrainer ::v-deep {
        .ifmLink-load {
            .el-loading-spinner {
                .el-loading-text {
                    font-size: 16px;
                }

                .el-icon-loading {
                    font-size: 22px;
                }
            }
        }
    }

    iframe {
        transition: all 0.25s;
        opacity: 0;
        transform: scale(0.98);
    }

    iframe.show-iframe {
        opacity: 1;
        transform: scale(1);
    }
</style>