vue + bootstrap-tab 環境下 iframe 自適應高度完美解決方案

1. vue  頁面摘要:

<div id="app" style="overflow:auto">
    <div id="div_main_container" style="margin: 10px;" v-cloak>
        bala bala ...
    </div>
</div>

2. bootstrap-tab.js 中新增函數:

function changeIframeHeight( iframeId,height ){
    $( "#" + iframeId ).height( height );
    $(".tab-content").css('height',height );
    $(".tab-pane.active").css('height',height );
}

3. vue對象新增 watch 監聽函數:

 new Vue({
        el: '#app',
        data: function() {
            return {
                bala bala...
            }
        },
        created: function () {
            bala bala...
        },
        watch:{
            dataList: function(){
                this.$nextTick(function(){
                    window.parent.changeIframeHeight( "我是 iframe 的 id", $("#div_main_container")[0].clientHeight + 50 );
                });
            }
        },
        methods: {
            bala bala...
        }
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章