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)
}
}
});