vue iframe 宽高自适应

获取窗口的宽高，然后将相应值赋值给iframe

<template><div><iframe ref="iframe" id="bdIframe" :src="bdTokenUrl" frameborder="0" scrolling="no" ></iframe></div>
</template><script>export default {data() {return {bdTokenUrl: ''}},created() {this.getUrl();this.$nextTick(()=>{this.getCode();});},mounted(){/*** iframe-宽高自适应显示   */const oIframe = document.getElementById('bdIframe');const deviceWidth = document.documentElement.clientWidth;const deviceHeight = document.documentElement.clientHeight;oIframe.style.width = (Number(deviceWidth)-220) + 'px'; //数字是页面布局宽度差值oIframe.style.height = (Number(deviceHeight)-120) + 'px'; //数字是页面布局高度差},methods: {/*** 获取-外部接口信息*/getUrl() {let that = thislet bdUrl = {queryurl: this.$paths.bdpath+'/locate'};this.$api.getBdToken(bdUrl,function(res) {that.bdTokenUrl = res.data.data;})},}}</script>

相关文章：关于Vue实例的生命周期created和mounted的区别

vue iframe 宽高自适应相关推荐

vue 图片宽高自适应
一.概述现有一个图片预览功能,目前设置的宽高都是100%.但是这样有一个问题,如果图片的高度太高,图片展示不全. 二.解决 vue图片在设置好的div里面自动适应宽高,图片显示全部,不够宽高的留空白 ...
vue图片宽高自适应_Echarts图标宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！...
源码解读:当Echarts绘制图表计算宽度的时候,由于初始化图表设置为display: none,所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将widt ...
vue图片宽高自适应_div或img图片高度随宽度自适应的方法
该方法主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面滚动. 一.可以使用js判断图片的宽度得到具体数值之后,再来利用js设置图片的高度(这里就不具体为大家细说了). 利用j ...
vue项目登录页背景图百分百铺满屏幕宽高自适应
vue项目背景图百分百铺满屏幕宽高自适应 .login{background: url(../../../static/img/login/beijing@2x.png);background-siz ...
宽高自适应_css样式写出三角形，宽高自适应的正方形，扇形！
闲来无事练习一下常见的css样式,希望大家能指点一二! 1用css实现一个三角形!原理用border属性 <!DOCTYPE html> <html> <head> ...
从零开始学习前端开发 — 7、CSS宽高自适应
一.宽度自适应语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果二.高度自适应语法: ...
css 百分比怎么固定正方形_css样式写出三角形，宽高自适应的正方形，扇形！...
闲来无事练习一下常见的css样式,希望大家能指点一二! 1用css实现一个三角形!原理用border属性 <! 实现它的原理那就要弄明白border属性, border是一个复合属性 borde ...
PC端宽高自适应问题
宽高自适应网页布局中经常要定义元素的宽和高.但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是pc自适应. 自适应的优点:元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适 ...
通过宽高自适应设计两栏布局和三栏布局
1.两栏布局我们要实现下面这样一个东西:两栏,左边一栏,右边一栏,左边宽高固定,右边宽高自适应,见下图: ✍我们有两种解决办法:(1)给右边盒子加外边距(2)calc函数的运用第一种方法:(1)给 ...

vue iframe 宽高自适应

vue iframe 宽高自适应相关推荐

最新文章

热门文章