Vue 监听元素前后变化值实例


Posted in Javascript onJuly 29, 2020

我就废话不多说了,大家还是直接看代码吧~

export default {
 data() {
 return {
  item: ''
 }
 },
 watch: {
 item(now, before){
  let remove = before.filter(x => now.indexOf(x) == -1);
  let add = now.filter(x => before.indexOf(x) == -1);
  /* 显示字符串或数组元素的增加和减少 */
  console.log(add, remove);
 }
 }
}

补充知识:Vuejs+Element监听-window.resize-el-menu响应式显示

效果

Vue 监听元素前后变化值实例

代码

template

<template>
 <div class="sidebar">
 <!-- 折叠按钮 -->
 <div class="collapse-btn" @click="collapseChage">
 <i class="el-icon-d-arrow-left" v-show="!collapse" title="收起">
   
 <small>收缩侧边栏</small>
 </i>
 <i class="el-icon-d-arrow-right" v-show="collapse" title="展开"></i>
 </div>
 <el-menu
 class="sidebar-el-menu"
 :default-active="onRoutes"
 :collapse="collapse"
 text-color="#8d9199"
 active-text-color="#20a0ff"
 unique-opened
 router
 >
 <template v-for="item in items">
 <template v-if="item.subs">
  <el-submenu :index="item.index" :key="item.index">
  <template slot="title">
  <i :class="item.icon"></i>
  <span slot="title">{{ item.title }}</span>
  </template>
  <template v-for="subItem in item.subs">
  <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
  <template slot="title">
   <i :class="subItem.icon"></i>
   {{ subItem.title }}
  </template>
  <el-menu-item
   v-for="(threeItem,i) in subItem.subs"
   :key="i"
   :index="threeItem.index"
  >{{ threeItem.title }}</el-menu-item>
  </el-submenu>
  <el-menu-item v-else :index="subItem.index" :key="subItem.index">
  <i :class="subItem.icon"></i>
  {{ subItem.title }}
  </el-menu-item>
  </template>
  </el-submenu>
 </template>
 <template v-else>
  <el-menu-item :index="item.index" :key="item.index">
  <i :class="item.icon"></i>
  <span slot="title">{{ item.title }}</span>
  </el-menu-item>
 </template>
 </template>
 </el-menu>
 <div>
 <i class="el-icon-d-arrow-right" v-show="collapse" title="展开"></i>
 </div>
 </div>
</template>

javascript

<script>
import bus from "./bus";
import { menu } from "../../data/menu";

export default {
 data() {
 return {
 collapse: false,
 items: menu,
 screenWidth: 1000
 };
 },
 computed: {
 onRoutes() {
 return this.$route.path.replace("/", "");
 }
 },
 created() {
 // 通过 Event Bus 进行组件间通信,来折叠侧边栏
 bus.$on("collapse", msg => {
 this.collapse = msg;
 });
 },
 mounted() {
 // if (document.body.clientWidth < 1500) {
 // this.collapseChage();
 // }
 const that = this;
 window.addEventListener("resize", function() {
 return (() => {
 window.screenWidth = document.body.clientWidth;
 that.screenWidth = window.screenWidth;
 })();
 });
 },
 watch: {
 screenWidth(val) {
 if (!this.timer) {
 this.screenWidth = val;
 this.timer = true;
 let that = this;
 setTimeout(function() {
  // that.screenWidth = that.$store.state.canvasWidth
  console.log(that.screenWidth);
  that.auto();
  that.timer = false;
 }, 400);
 }
 }
 },
 methods: {
 // 侧边栏折叠
 collapseChage() {
 this.collapse = !this.collapse;
 bus.$emit("collapse", this.collapse);
 },
 auto() {
 if (this.screenWidth < 1200) {
 console.log("收起来");
 this.collapse = true;
 bus.$emit("collapse", true);
 } else {
 console.log("展开");
 this.collapse = false;
 bus.$emit("collapse", false);
 }
 }
 }
};
</script>

css

<style scoped>
.sidebar {
 z-index: 1024;
 display: block;
 position: fixed;
 left: 0;
 top: 70px;
 bottom: 0;
 overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
 width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
 width: 200px;
}
.sidebar > ul {
 height: 100%; /*写给不支持calc()的浏览器*/
 height: calc(100% - 52px);
 top: 30px;
 background-color: rgb(235, 239, 243);
 border-top: 1px solid #d6d6d6;
}
.sidebar > ul > li,
.sidebar > ul > li div {
 background-color: rgb(235, 239, 243);
}
.sidebar > ul > li > ul {
 background-color: rgb(235, 239, 243);
}
.el-menu {
 background-color: rgb(235, 239, 243);
}
i {
 margin-right: 10px;
}
.collapse-btn {
 height: 30px;
 width: 100%;
 cursor: pointer;
 line-height: 30px;
 position: absolute;
 top: 0;
 left: 0;
 background-color: #f4f6fa;
 color: #fff;
 text-align: center;
 overflow: hidden;
 box-sizing: border-box;
 box-shadow: 0 5px 10px #ddd;
}
.collapse-btn i {
 color: #8d9199;
 padding: 1px;
 cursor: pointer;
 overflow: hidden;
 text-overflow: ellipsis;
}
/* .collapse-btn:before{
 content: "";
 display: block;
 height: 0;
 border-top: 1px dotted #909399;
 position: absolute;
 left: 15px;
 right: 15px;
 top: 18px;
 } */
</style>

##注意⚠️

此开发框架是github 名为 lin-xin 的 vue-manage-system

因公司项目需要兼容iPad,故而修改

详细代码点击这里

以上这篇Vue 监听元素前后变化值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
JS数组的常用方法整理
Mar 31 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 #Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 #Javascript
小程序实现列表展开收起效果
Jul 29 #Javascript
jquery实现简单自动轮播图效果
Jul 29 #jQuery
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 #Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 #Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 #Javascript
You might like
php GD绘制24小时柱状图
2008/06/28 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
python自动格式化json文件的方法
2015/03/11 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
如何在python中实现随机选择
2019/11/02 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
物业管理专业个人的自我评价
2013/11/19 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
事业单位个人总结
2015/02/12 职场文书
结婚老公保证书
2015/02/26 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang