vue element iframe 自適應視窗大小

阿新 • • 發佈：2019-02-15

let vm = new Vue({ el: '#app', data: { activeIndex: '1', activeIndex2: '1', isCollapse: false, items: [], iframes: [], clientHeight: document.documentElement.clientHeight - 120, clientWidth: document.documentElement.clientWidth }, created: function

() { let self = this; self.items = [{url: "/test1", text: "test1", children: [{url: "test1.html", text: "test1"}]}, { url: "/test", text: "test2", children: [{url: "test2.html", text: "test2"}] }, {url: "/test", text: "test3", children: [{url: "test3.html"

, text: "test3"}]}, {url: "/test", text: "manage1"},]; self.iframes = [{menuId: "1", menuSrc: "test1.html", show: true, text: "manage1", height: this.clientHeight},] }, mounted: function () { let self = this; window.onresize = function () { self.clientHeight = document.documentElement.clientHeight - 120

; for (let i = 0; i < self.iframes.length; i++) { self.iframes[i].height = self.clientHeight; } self.clientWidth = document.documentElement.clientWidth; }; window.onresize(); }, watch: { clientWidth: function (val) { let self = this; self.isCollapse = val < 1000; } }, methods: { handleSelect: function (key, keyPath) { console.log(key, keyPath); }, handleOpen: function (key, keyPath) { console.log(key, keyPath); }, handleClose: function (key, keyPath) { console.log(key, keyPath); }, menuSelect: function (key, keyPath) { console.log(key, keyPath); let self = this; self.closeAllIframe(); let iframe = {menuId: key, menuSrc: key, show: true, text: key, height: self.clientHeight}; let index = function () { let indexTemp = -1; for (let i = 0; i < self.iframes.length; i++) { if (self.iframes[i].menuSrc === iframe.menuSrc) { indexTemp = i; } } return indexTemp; }(); if (index >= 0) { self.toggleIframe(index); } else { self.iframes.push(iframe); } }, clickfun: function (e) { let self = this; self.toggleIframe(e.currentTarget.getAttribute("data-id")) }, toggleIframe: function (index) { let self = this; self.closeAllIframe(); let position = index === self.iframes.length ? self.iframes.length - 1 : index; if (position >= 0) { self.iframes[position].show = true; } }, closeAllIframe: function () { let self = this; for (let i = 0; i < self.iframes.length; i++) { self.iframes[i].show = false } }, menuClose: function (e) { let self = this; let index = parseInt(e.currentTarget.getAttribute("data-id")); self.iframes.splice(index, 1); self.toggleIframe(index) } } });

vue element iframe 自適應視窗大小

vue element iframe 自適應視窗大小

easyUI Layout自適應視窗大小

QT程式自適應視窗大小

QGraphicsView使影象自適應視窗大小

選項卡Tabs 設定自適應視窗大小

JQuery EasyUI Layout 在from佈局自適應視窗大小

Echarts 如何設定多個圖表自適應視窗大小

一個頁面存在多個echarts圖形,resize失效，圖形自適應視窗大小

11three.js自適應視窗大小

Qt Creator 窗體控制元件自適應視窗大小布局

Qt中窗體控制元件按照比例縮放，自適應視窗大小進行佈局

echarts學習總結（二）：一個頁面存在多個echarts圖形，圖形自適應視窗大小

PyQt5 QTableWidget（表單控制元件）自適應視窗大小、欄位大小調整及佈局（一）

java的JDesktopPane背景圖片自適應視窗大小示例

利用WPF建立自適應視窗大小布局的WinForm視窗

Qt基礎——自適應視窗大小

QT中的UI介面控制元件隨視窗自適應變化大小

iframe自適應高度以及呼叫父子視窗的方法

QT5中的UI介面控制元件隨視窗自適應變化大小無需寫任何程式碼！

Qt Quick Designer生成的圖形可以自適應視窗的大小變化

vue element iframe 自適應視窗大小

相關推薦