021:vue中watch监听页面变化 动态设置iframe元素的高度

news2024/9/23 5:21:23

在这里插入图片描述

第021个

查看专栏目录: VUE — element UI

vue项目中如何动态的设置iframe的高度的呢,这里主要用到了监听的功能,页面高度变化时,设定的动态高度也会相应的改变。

template中:

<iframe width="100%" :height="fullHeight" :src="pdfSRC" id="pdf"></iframe> 

data()中:

fullHeight: document.documentElement.clientHeight , 
  timer: true 

watch中:

watch: { 
    fullHeight(val) { 
      if (!this.timer) {//防止多次触发监听页面卡顿 
        this.fullHeight = val; 
        this.timer = true; 
        let that = this; 
        setTimeout(function() { 
          that.timer = false; 
        }, 400); 
      } 
    } 
  }, 

mounted中:

window.onresize = () => { 
      return (() => { 
        window.fullHeight = document.documentElement.clientHeight; 
        this.fullHeight = window.fullHeight ; 
      })(); 
    }; 

专栏目标

在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。

(1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,updated, beforeDestroy,destroyed,activated,deactivated,errorCaptured,components,)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if,v-on,v-pre,v-cloak,v-once,v-model, v-html, v-text, keep-alive,slot-scope, filters, v-bind,.stop, .native, directives,mixin,render,国际化,Vue Router等

(2)提供element UI的经典操作:安装,引用,国际化,el-row,el-col,el-button,el-link,el-radio,el-checkbox ,el-input,el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop,v-infinite-scroll, el-drawer等

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/690083.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

maven使用profile动态配置(IDEA演示)

简介 使用Maven的profile来切换不同环境(开发/测试/发布生产)的配置文件 需求简介 通过把不同环境的配置参数信息,放到不同环境的配置文件里(例如:dev.properties开发环境配置文件).Maven在打包的时候根据选择不同的环境(例如dev:生产环境)调用对应的配置文件(dev.properties)…

FPGA XDMA 中断模式实现 PCIE X8 上位机视频传输 提供工程源码和QT上位机源码

目录 1、前言2、我已有的PCIE方案3、PCIE理论4、总体设计思路和方案图像产生、发送、缓存XDMA简介XDMA中断模式图像读取、输出、显示QT上位机及其源码 5、vivado工程详解6、上板调试验证7、福利&#xff1a;工程代码的获取 1、前言 PCIE&#xff08;PCI Express&#xff09;采…

springboot 国家公务员招聘网站-计算机毕设 附源码80528

springboot 国家公务员招聘网站 目 录 摘要 1 绪论 1.1研究背景与意义 1.2开发现状 1.3系统开发技术的特色 1.4springboot框架介绍 1.5论文结构与章节安排 2 2国家公务员招聘网站系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1数据增加流程 2.3.2数据修改流程 2.…

【(不用Ajax)解决 Layui 插件分页点下一页后又自动跳回前一页的问题】

问题描述: 我们在使用Layui插件进行分页会出现一个常见的问题。就是假如我们不用异步的方法进行分页获取后端的数据时&#xff0c;进行window.location.href进行跳转的进行后端分页。 会遇到: 切换页面的时候&#xff0c;点下一页后又自动跳回前一页的问题 原因:有一个curr属…

论文翻译:2021_Real-Time Denoising and Dereverberation wtih Tiny Recurrent U-Net

论文地址&#xff1a;微型循环U-Net实时降噪和去混响 论文代码&#xff1a; https://github.com/YangangCao/TRUNethttps://github.com/amirpashamobinitehrani/tinyrecurrentunet 引用格式&#xff1a;Choi H S, Park S, Lee J H, et al. Real-Time Denoising and Dereverbera…

将画面上的DOM元素转为SVG并且导出

需求如下&#xff1a; import { elementToSVG } from dom-to-svg; let dom document.querySelector(#pane-${this.currentTabIndex}); const svgDocument elementToSVG(dom); const svgString new XMLSerializer().serializeToString(svgDocument); common.download(this.…

Oracle把单行数据拆分成多行

背景&#xff1a;把接收人[JSRID]拆分为多行&#xff0c;接收人是存在一个字段中&#xff0c;以逗号隔开&#xff0c;每次会议的接收人数量不一 建表语句&#xff1a; CREATE TABLE "HYTZGGZS_HYTZGGXXTJ" ("WF_ORUNID" VARCHAR2(255 BYTE) VISIBLE,&quo…

图像增强之图像锐化(边缘增强)之prewitt算子

note matx (-1,0,1;0,0,0;-1,0,1) maty (-1,-1,-1;0,0,0;1,1,1) code // 图像增强之图像锐化(边缘增强)之prewitt算子 void GetPrewittMat(Mat& prewittMatX, Mat& prewittMatY) {prewittMatX (Mat_<int>(3,3) << -1,0,1,0,0,0,-1,0,1);prewittMatY…

linux系统Nginx服务页面优化

文章目录 一、Nginx服务优化1.隐藏版本号2.日志分割3.设置页面压缩4.配置网页缓存时间5.设置连接超时6.Nginx并发设置优化&#xff08;更改进程数&#xff09;7.修改用户与组8.配置防盗链 总结 一、Nginx服务优化 1.隐藏版本号 隐藏Nginx版本号&#xff0c;以避免泄露Nginx的…

使用QFIL刷机步骤

目录 0.注意 1.确认是否出现端口 2. 使用abd命令开启下载端口 3.选择生成类型 4.配置为UFS 5.选择文件 6.加载文件 7.点击Download下载 0.注意 连接手机与电脑时需要手机是开机状态&#xff0c;否则连接不上 操作过程中不能对手机进行任何操作 若操作中未选择&#xff1a…

Python巧解数字变换问题,有点意思(65)

小朋友们好&#xff0c;大朋友们好&#xff01; 我是猫妹&#xff0c;一名爱上Python编程的小学生。 和猫妹学Python&#xff0c;一起趣味学编程。 今日主题 如何用Python解决数字变换问题 比如&#xff1a; 对于一对正整数a和b&#xff0c;对a只能进行加1&#xff0c;减1…

chatgpt赋能python:Python计算器编程:从入门到精通

Python计算器编程&#xff1a;从入门到精通 随着计算机技术的不断发展&#xff0c;计算器已经成为了我们日常生活中必不可少的工具。Python是一种简单易学的编程语言&#xff0c;也是一种十分适合编写计算器程序的语言。 为什么选择Python编写计算器程序&#xff1f; Python…

网络安全合规-ISO 27701

ISO 27701是什么&#xff1f; 是ISO 27001和 ISO 27002的扩展内容&#xff0c;对建立、实施、维护和持续改进隐私信息管理系统&#xff08;PIMS&#xff09;的各项要求做出了规定&#xff0c;是首部针对隐私信息管理的国际标准。该标准概述了适用于个人可识别信息控制者和处理者…

Cesium中,在shader里访问顶点法向

在shader中访问顶点法相 前提条件&#xff1a;使用cesium内部的geometry&#xff0c;非自定义的geometry&#xff0c;比如BoxGeometry。 构造Geometry时&#xff0c;需要指定vertexFormat里面包含NORMAL,这样在构造Geometry时&#xff0c;Cesium会自动生成顶点法向。在默认情况…

idea打的包字符集为GBK

1.最近对接一个打印机厂家的机器&#xff0c;他们对与打印数据要求字符集是UTF-8的&#xff0c;做完程序在自己idea上运行是是能够打印的&#xff0c;但是打包后&#xff0c;就不能够打印了。然后问了设备方是否是他们机器的原因&#xff0c;后面他们问了我这报错码&#xff0c…

CSS选择器总结

作者&#xff1a;爱塔居 专栏&#xff1a;JavaEE​​​​​ 作者简介&#xff1a;大三学生&#xff0c;希望和大家一起进步&#xff01; 文章目录 文章目录 一、CSS选择器的概念 二、基础选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.3 通配符选择器 三、复合选择器 3.1…

【mysql环境】mysql的多种安装方法、环境配置总结

目录 第一步&#xff1a;mysql安装方法 方法一&#xff1a; 方法二&#xff1a; 方法三&#xff1a; 第二步&#xff1a;配置环境变量 第三步&#xff1a;验证是否配置成功 第一步&#xff1a;mysql安装方法 方法一&#xff1a; 下载MSI安装程序&#xff0c;进行mysql的…

解决多ffmpeg环境冲突问题

解决多ffmpeg环境冲突问题 问题描述&#xff1a; 使用make安装了ffmpeg-5.1&#xff0c;安装目录目录位于/usr/loacl/ffmpeg&#xff0c;但是使用ffmpeg -version命令出来的版本是4.3&#xff0c;如下图所示&#xff1a; 解决方案&#xff1a; 可以使用以下命令来确定正在…

redis源码之:扩容后的dictScan遍历顺序与JDK的concurrentHashMap 扩容机制

进入正题前&#xff0c;先来复习下关于2次幂的mod运算 设n为2次幂&#xff0c;数a mod n 等价于 a & n-1 从二进制来看&#xff0c;相当于余数为a省去n最高位左侧的所有位(含最高位)&#xff0c;保留n右侧所有低位即为余数 如&#xff1a;a 7(0000_0111),n4(0000_0100),通…

Linux挂载详解

Linux 系统中“一切皆文件”&#xff0c;所有文件都放置在以根目录为树根的树形目录结构中。在 Linux 看来&#xff0c;任何硬件设备也都是文件&#xff0c;它们各有自己的一套文件系统&#xff08;文件目录结构&#xff09;。 因此产生的问题是&#xff0c;当在 Linux 系统中使…