vue+elementui下监听屏幕变化并处理对应样式

最新推荐文章于 2024-06-12 17:54:48 发布
最新推荐文章于 2024-06-12 17:54:48 发布
阅读量3.6k 收藏 2
点赞数
分类专栏： vue 文章标签： VUE elementui 监听屏幕尺寸
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42597536/article/details/89518177
版权

mounted () {

window.addEventListener('resize', () => {

if (document.body.clientWidth < 900) {

this.tabposition = 'top'

} else {

this.tabposition = 'left'

}

})

}

 

补充：最好是将监听后对应的操作函数封装起来，然后再页面的销毁程序中对window解除对应监听。可以参考我另一个博客

 

只爱吃菜不吃饭
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+elementUI实现动态表格合并单元格.zip
09-26
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...
Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）
10-15
在处理文件上传时，我们需要监听 `on-change` 事件，当用户选择图片后，遍历返回的 `fileList`，获取每个文件的 `raw` 对象，这通常是实际的文件对象。将这些对象组成新的列表，然后调用 `http-request` 方法进行...
vue-watch监听路由的变化
weixin_33727510的博客
10-12 91
转载于:https://www.cnblogs.com/huanhuan55/p/9779204.html
elementUI From表单踩坑之watch 变量监控（解决方法：@change=“nameChange”事件）
陈浩然哦 的博客
07-01 3545
- 当修改input框内的值（form.name）的时候，watch 监控from失败，watch中的from不相应，打印无效； <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-fo
Vue2 页面监听横竖屏切换并解决刘海遮挡问题
最新发布
weixin_42560947的博客
06-12 158
pc端页面嵌入App中时会出现刘海遮挡问题，以下代码可实现获取状态栏高度，并在进行横竖屏切换时进行样式属性计算。
elementUI之时间日期选择器 + watch监听
ZXT149074136的博客
01-02 5358
最近做项目时用到element UI的时间日期选择器，由于是需要设置系统开放时间和关闭时间，所以用到了两个el-date-picker 问题1：需要对两个选择器的所能选的时间范围做限制 限制1：开放时间不能早于当前时间且不能晚于关闭时间 限制2：关闭时间不能早于当前时间且不能早于开放时间 解决：picker-options属性 代码： //html &...
elementUI+VUE完成动态添加表单项并使用watch深度监听
a932946893的博客
08-26 5182
VUE的watch深度监听 需求是动态添加表单项并计算金额以及总价，由于需要监听对象中的数组属性并计算金额，使用到了watch深度监听。刚使用vue不久，记录一下解决问题的过程，代码写得不是很好，见谅 效果图： js代码: /*监听价格及数量变化，计算物品总价及采购总价*/ watch:{ 'form.purchase_list':{ handler:funct...
vue+elmentui的踩坑之路 （watch踩坑）
赵圆圆
03-17 3160
当需要监听对象的某一个属性的时候写法： data:{ toEditForm: { id: null, functionType: null } }, computed: { "toEditFormWfId": function(){ return this.toEditFor...
springboot+mybatisplus+vue+elementUI分页.rar
10-29
前端（Vue.js+Element UI）则负责展示分页结果，监听用户的分页操作，通过Ajax向后端发送请求，获取新的数据并更新视图。 总的来说，这个项目展示了如何利用现代技术栈实现高效、美观的后台管理系统，通过...
【Vue2 + ElementUI】分页el-pagination 封装成公用组件
01-25
在Vue2框架中，ElementUI是一个非常流行的UI组件库，提供了丰富的组件，如表格、按钮、弹窗等，其中el-pagination是用于实现分页功能的组件。为了在多个页面上复用并统一分页样式，我们可以将其封装为一个公用组件。...
基于Vue2.0+ElementUI实现表格翻页功能
08-29
- `@size-change` 和 `@current-change` 分别用于监听每页大小变化和当前页变化的事件，对应的处理函数分别是 `handleSizeChange` 和 `handleCurrentChange`。 - `:current-page.sync` 和 `:page-size` 分别绑定当前...
VUE+ELMENTUI大数据平台
11-08
公司的大数据平台使用，VUE+ELMENTUI+echarts希望给大家带来帮助！
watch案例解析（element-ui el-select 无法选中问题剖析）
weixin_30357231的博客
08-31 234
fire 读在最前面： 　　1、此文章衔接Vue 虚拟Dom 及 部分生命周期初探，相关整体知识点请先阅读后再继续本文阅读 问：子组件中明明有watch value，为什么this.$emit('input', 888);没有触发watch回调，反而在父组件data数据变化后触发回调? <child v-model="b"></child> var ...
vue实际项目应用遇到的watch应用、elementUI分页赋值高亮的问题及解决方法
weixin_34384681的博客
01-14 559
功能需求：根据查询条件获取数据。 1、查询条件“发送的条件”值发生变化时主动调用数据。使用watch检测“发送的条件”字段值变化实现动态获取数据。 2、点击上图列表中“查看”按钮前往详情页面再返回当前页面时，保留之前的所有查询条件。 问题： 1、页面加载初始化请求数据，watch监测到数据变化又触发接口一次请求（如果页面中多个使用watch检测的请求参数将请求多次） 2、...
关于element ui中的选择器和vue监听函数watch的一个结合使用：
m0_52518047的博客
08-12 1627
关于element ui中的选择器和vue监听函数watch的一个结合使用： 需求如下：首先每选定一个选择器，另一个选择器中的内容要被渲染出来，思路就是，监听每个选择器中双向绑定的数据，一旦这个选择器中选定数据下一个选择器就去发送请求 补充一下关于这个选择器的一些小知识：v-model对应的是选中的内容，v-for循环的数组就是点开选择器你能看到的一系列的数据 第一个选择器中没有内容的时候，第二个选择器中是没有数据的 当第一个选择器中有数据的时候，第二个选择器可以开始选择 同理第二个和第三个也是一样，
vue 屏幕大小的监听与VUE中的使用
沉淀，积累、进步
06-29 2537
监听屏幕尺寸，vue举例，根据屏幕尺寸替换页面变量
使用element-ui让表格固定在当前窗口,可随窗口大小改变
old_hu的备忘录
05-27 4210
当表头达到表格顶部的时候让给表格max-height的值,让表格不会被滚动到窗口外面去,这样翻页也能在窗口中,提升一点用户体验 背景: //背景:表格在一个有头部的页面里面,还有导航 console.log($('.a').outerHeight()); //头部高度 console.log($('.b').outerHeight()) //...
vue中监听窗口大小，添加自适应样式
weixin_47180815的博客
11-20 1087
在Vue工程中，添加样式，部分需要做到自适应，需要添加resize事件，由于是单页面应用，如果组件初始化的时候绑定事件，在切换页面的时候不去注销事件，如果来回切换，会让resize事件执行多个函数，迅速消耗CPU,浏览器会出现卡顿的情况 所以在监听resize事件，需要在 mounted() 添加监听时间，然后在 destroyed() 钩子函数中将其移除 mounted() { this.handleResize(); window.addEventListener("resize", t
vue 监听窗口分辨率去不同的网址
weixin_39520640的博客
06-03 968
APP.vue： export default { name: 'App', data(){ return{ } }, created() { console.log(screen.width ) if(screen.width<768){ // 768，ipad window.location.href="http://localhost:9090"; // 去移动端页面 } }, mounted() { wind
vue2elementui封装左边导航
05-20
你可以通过以下步骤使用 Vue2 + ElementUI 封装左侧导航： 1. 安装 ElementUI 使用 npm 命令行工具执行以下命令安装 ElementUI： ``` npm install element-ui --save ``` 2. 创建组件 创建一个名为 `SideMenu.vue` 的组件，用于封装左侧导航。 ```html <template> <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleMenuSelect"> <el-menu-item v-for="(item, index) in menuList" :key="index" :index="item.path"> <i :class="item.icon"></i> <span slot="title">{{ item.title }}</span> </el-menu-item> </el-menu> </template> <script> export default { name: "SideMenu", props: { menuList: Array, activeIndex: String }, methods: { handleMenuSelect(index) { this.$emit("menu-select", index); } } }; </script> <style> /* 样式代码 */ </style> ``` 在组件中，我们使用了 ElementUI 的 `<el-menu>` 和 `<el-menu-item>` 组件来渲染导航菜单。通过 `props` 属性，我们可以接收父组件传递过来的导航菜单数据和当前激活菜单项的索引。 当用户点击菜单项时，我们触发 `handleMenuSelect` 方法，并通过 `$emit` 方法向父组件传递当前菜单项的索引。 3. 在父组件中使用 在父组件中使用 `<SideMenu>` 组件，并传递导航菜单数据和当前激活菜单项的索引。 ```html <template> <div> <SideMenu :menuList="menuList" :activeIndex="activeIndex" @menu-select="handleMenuSelect"></SideMenu> <router-view></router-view> </div> </template> <script> import SideMenu from "./SideMenu.vue"; export default { name: "App", components: { SideMenu }, data() { return { menuList: [ { title: "首页", path: "/", icon: "el-icon-s-home" }, { title: "用户列表", path: "/user", icon: "el-icon-user" }, { title: "订单列表", path: "/order", icon: "el-icon-s-order" } ], activeIndex: "/" }; }, methods: { handleMenuSelect(index) { this.activeIndex = index; this.$router.push(index); } } }; </script> <style> /* 样式代码 */ </style> ``` 在父组件中，我们引入了 `<SideMenu>` 组件，并通过 `props` 属性传递导航菜单数据和当前激活菜单项的索引。我们还监听了 `<SideMenu>` 组件的 `menu-select` 事件，在事件处理函数中更新了当前激活菜单项的索引，并通过 `$router.push` 方法切换到对应的路由页面。 这样，我们就成功地封装了一个简单的左侧导航组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值