首页 > 其他分享 >Vue监听页面放大缩小事件

Vue监听页面放大缩小事件

时间:2023-04-26 10:36:04浏览次数:33  
标签:Vue window let getRatio 100 监听 页面

Vue监听页面放大缩小事件  ,使用window.addEventListener,methods中方法

 ChangeWin(){
      let ratio = this.getRatio();
      let Pwidth = window.screen.width*this.getRatio()/100;
      let PHeight = window.screen.height*this.getRatio()/100;
       //1920 *1080
      if (ratio == 100) {
        if (Pwidth == '1920' && PHeight == '1080') {
          this.$el.style.setProperty('--mg_top1', '3.5vh')
        }
      }
    }

使用:

mounted() {
    window.addEventListener('resize', this.ChangeWin);
  },

 

标签:Vue,window,let,getRatio,100,监听,页面
From: https://www.cnblogs.com/youmingkuang/p/17354905.html

相关文章

  • uniapp页面中的按钮使用分享功能
    https://www.codenong.com/cs109827730/......
  • 动力节点老杜Vue框架教程【三】Vue组件化
    Vue.js是一个渐进式MVVM框架,目前被广泛使用,也成为前端中最火爆的框架Vue可以按照实际需要逐步进阶使用更多特性,也是前端的必备技能动力节点老杜的Vue2+3全家桶教程已经上线咯!学习地址:https://www.bilibili.com/video/BV17h41137i4/视频将从Vue2开始讲解,一步一个案例,知识点......
  • 动力节点老杜Vue框架教程【三】Vue组件化
    Vue.js是一个渐进式MVVM框架,目前被广泛使用,也成为前端中最火爆的框架Vue可以按照实际需要逐步进阶使用更多特性,也是前端的必备技能动力节点老杜的Vue2+3全家桶教程已经上线咯!学习地址:https://www.bilibili.com/video/BV17h41137i4/视频将从Vue2开始讲解,一步一个案例,知识点由浅入......
  • 老杜2023最新Vue实战精讲(三)Vue组件化
    动力节点老杜全新版Vue教程笔记分享给大家学习の地止:https://www.bilibili.com/video/BV17h41137i4视频教程从Vue2开始讲解,一步一个案例,知识点由浅入深,然后很自然的过度到Vue3版本。Vue3是目前企业中使用最多的一个版本。视频中会把每一个Vue的知识点讲解的非常通透,不但举例......
  • VUE在Return中定义变量,放在方法中使用
    Return中定义CSS变量在Return中定义一个比变量data(){return{'--mg_top1':'3vh',},}在methods方法使用this.$el.style.setProperty('--mg_top1','3.6vh') 在CSS中使用.mg_top{margin-top:var(--mg_top1)......
  • Vue3 + element-plus使用注意
    1.给组件设置ref="xxx"例如:<el-tableref="tableRef"定义tableRef时,需要注意尽量使用ref()而非ref(null)consttableRef=ref();因为使用ref(null)会得不到$el的相关属性,即undefined例如:表格自适应高度consttableRef=ref();constsetTableHeight=()=>......
  • 【Vue】如何watch v-for中的元素属性值
     如果你想watch一个v-for中的变量,你可以在vue组件的watch对象中创建一个函数,来监听这个变量。假设你有一个数组items,它是一个对象数组,你想要监听每个对象的name属性。那么你可以这样写:<template><divv-for="iteminitems":key="item.id">{{item.name}}</div></tem......
  • vue2项目中调取登录接口登录以后获取个人信息以后,储存在哪里,怎么在不同的页面展示想
    在Vue2项目中,可以将个人信息存储在Vuex状态管理中或者浏览器的本地存储中,具体取决于项目的需求和规模。1.Vuex状态管理在Vuex中定义一个user模块,用于存储用户信息,可以在登录成功后将用户信息存储到该模块中。```javascript//store/user.jsconststate={userInfo:null}......
  • vue 使用Element 的form表单如何校验对象中的对象属性?
    1、校验对象中的对象属性,需要特殊处理下:<templatev-if="form.dataType===0"><el-form-itemlabel="芯片类型"prop="configExtend.schemeVersion"><el-selectv-model="form.configExtend.schemeVersion&quo......
  • vue使用vue-qr生成二维码
    vue-qr基础使用:第一步,先安装vue-qr插件npminstallvue-qr--save第二步,在想要生成vueQr的Vue页面引入组件importvueQrfrom'vue-qr'第三步,在components中引入VueQr组件components:{VueQr}如下:<script>importVueQrfrom'vue-qr';exportdefault{componen......