- 博客(31)
- 收藏
- 关注
RSS订阅原创 节流与防抖
防抖你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。PS：防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。我们先来看一个袖珍版的防抖理解一下防抖的实现：
2021-02-23 15:13:46
161
原创 call apply bind
call apply bind共同点：1、均能改变 this 指向，且指向第一个参数2、均从第二个参数开始传参不同点1、call apply 均能立即执行函数，而 bind 是稍后执行，需要执行即在后面添加 ( )2、call bind 后面参数个数、格式不限制，apply 只有两个参数，第二个参数是数组，为所有参数的集合<script> let obj = { name: 'qwe', age: 18 }
2021-01-29 16:19:07
142
原创 js 笔记
记录项目中遇到的问题，便于查阅，持续更新。。。一、函数1、问题描述：优化代码过程中，对数据处理用到的是同一种格式，考虑封装，对于return 的应用handleLine(){} 是数据处理方法，在方法内数据都处理成功，且打印正常，但是并未挂载到this.IA_data_arr 上解决方法—因为已经把处理过的数据给return ，直接接收赋值即可...
2021-01-11 16:31:44
90
原创 vue 父子组件传值及方法调取
父组件<!-- 父组件 --><template> <div id="electricityPay"> <div > <Pay ref="Pay" :myFunc="handle3"></Pay> </div> <div @click="handle">触发方法</div> </div></templa
2021-01-07 13:42:18
231
原创 顶部消息通知栏消息数与页面中数据同步更新
需求—顶部告警信息数处理的告警信息页面-要求点击页面中未读后处理完单条信息，告警信息数量 -1 ，同时顶部栏消息数 同步 -1借鉴内容在app.vue中<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div></template><script>export default { name: 'App', //
2020-12-23 16:16:30
345
2
原创 第三方插件合集
工作中用到的或接触到的插件，仅作记录，方便查找1、滚动条https://vuescrolljs.yvescoding.org/zh/guide/configuration.html#vuescroll
2020-12-21 10:17:06
4798
原创 vue单页面打开外链及嵌套
点击菜单栏，浏览器创建新窗口打开外链方法很多，比如通过路由配置 { path: "/accessControlSystem", name: "AccessControlSystem", component: Layout, redirect: "noRedirect", alwaysShow: true, meta: { title: "门禁系统", ic
2020-12-09 16:53:48
3437
3
原创 高德地图渲染多点位并且点击出现提示框
参考内容子组件代码<template> <div class="info"> <div style="text-align: center;"> <h4>详 情</h4> </div> <p>省市: {{baseInfo.province}} {{baseInfo.city}}</p> <p>地址: {{baseInfo.address}}</
2020-12-02 13:56:30
978
原创 vue 动态控制button按钮颜色及内容
需求 —根据后端数据，动态渲染button按钮个数，且分为两种不同类型按钮（断开、闭合）dom部分 <el-table-column label="控制"> <template slot-scope="scoped"> <el-dropdown> <span class="el-dropdown-link"> 点击操作
2020-11-19 13:35:53
6389
原创 js筛选对象中的空值
如果对象中属性比较多，可以循环对象 let data = { "id": this.equipmentID, "codeName": this.equipmentName, "equipmentInfo": this.equipmentSite, "pageSize": this.pageSize, "pageNum": this.currentPage } let newData = {}
2020-11-18 16:45:02
2780
原创 echarts函数封装
折线图（多条）function lineChart(id,echarts,xdata,ydata,title,legend){ var dom = document.getElementById(id); var myChart = echarts.init(dom); option = null; option = { color:['#FF00ED', '#9311FF', '#00B6F5','#FFB10D',
2020-11-18 09:17:23
1378
原创 获取当前时间并计时
封装函数----methods:{ //获取当前时间 getDate(){ let that = this this.timer=setInterval(function(){ let dt = new Date(); let days = ["星期日", "星期一",
2020-11-06 11:19:13
236
原创 select组件选中后获取当前值对应的对象信息
需求-----选中角色后，在input框中显示，同时需要获取该用户的基本信息对象data () { return { receiveUser:{ }, userList:[ ] }}组件使用 <el-select v-model="receiveUser" placeholder="请选择" clearable value-key="userId" @change=
2020-10-15 10:15:22
2675
原创 关于vue-admin-element框架调接口传参的问题
vue-admin-element框架对于封装的api的形参有要求/*get 请求 使用 param形参post 请求 使用 data形参*/关于post请求，如果传递参数可以为空，调接口依然需要传空{ } ，否则报错500；body 要求是 JSON(application/json)，{ } 中参数写成JSON 对象形式 //参数为空，查询全部订单 getAllOrder () { workOrderList({}).then(res => {
2020-10-14 13:52:03
2470
转载 element switch 滑块文件中间显示（转载）
别人写的很详细了，就不画蛇添足了转载地址：https://blog.csdn.net/yh8899abc/article/details/106360814?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allsobaiduend~default-2-106360814.nonecase&utm_term=switch%20vue%20%E6%B7%BB%E5%8A%A0%E6%96%87%E5%AD%97&
2020-09-30 16:15:56
288
原创 element NavMenu侧边栏导航栏突出问题
使用组件库中的 NavMenu布局后，导航栏右侧会有部分突出只需要去除右侧边框就可以了 .el-menu { border-right: none; }
2020-09-29 11:24:06
1233
原创 element进度条动态进度值问题
percentage属性值定死的状态 <el-progress :percentage="80" :format="format" :color="customColors" ></el-progress>percentage动态变化（加入了运算） <
2020-09-23 10:10:13
7569
原创 js 报错 Cannot read property ‘dictTreeList‘ of undefined,但数据却存在
js报错信息Error in render: "TypeError: Cannot read property 'dictTreeList' of undefined" vue.esm.js?a026:1897TypeError: Cannot read property 'dictTreeList' of undefined数据的获取 const { data: res } = await this.$http.get('course/getCourseList?userId=
2020-09-18 10:09:08
198
原创 代码自动格式化配置
先安装插件 eslint Prettier - Code formatter veturvsCode 左下角 --设置 – 用户 – 功能 – 终端 – 在setting.json设置{ // tab 大小为2个空格 "editor.tabSize": 2, // 100 列后换行 "editor.wordWrapColumn": 100, // 保存时格式化 "editor.formatOnSave": true, // 开启 vscode 文件路径导航 "
2020-09-04 16:53:46
360
原创 element中的tag标签组件可移除功能bug
文档描述：设置closable属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置disable-transitions属性，它接受一个Boolean，true 为关闭。然而组件中添加closable属性后，仍无法移除响应tag解决：绑定handleClose事件 <el-tag v-for="tag in selected" :key="tag"
2020-08-28 11:09:12
5648
2
转载 element二次封装时间选择器组件（转载）
此为转载群友内容作者----亦然Dir链接----https://www.jianshu.com/p/d4c57cd2af17
2020-08-20 13:47:11
421
原创 keepAlive 组件缓存
不管你项目中有没有用到过 < keepAlive >< /keepAlive >，在求职中总会难免被问到它的作用keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现这里通过包裹 < router-view /> 来实现页面组件的缓存功能给路由配置中添加meta属性，meta其
2020-08-11 18:42:05
631
原创 定义sass中的@mixin方法
实际开发中，css属性为了满足浏览器的兼容问题，常常需要在属性前加浏览器前缀，书写麻烦如— -webkit-box-shadow:0 0 18px 0 rgba(0,0,0,.2); -moz-box-shadow:0 0 18px 0 rgba(0,0,0,.2); -ms-box-shadow:0 0 18px 0 rgba(0,0,0,.2); -o-box-shadow:0 0 18px 0 rgba(0,0,0,.2); box-shadow:0 0 18px 0 rgba
2020-08-11 11:26:46
440
原创 sass @for方法的使用
要实现的效果如图----------续航里程进度条上代码---- <div> <h4 class="car-number">{{carNumber}}</h4> <div class="electricity " :class="itemNumber"> <!-- 续航里程条 -->
2020-08-11 11:18:06
634
转载 前端60中常用工具方法【转载】
此为转载内容文章作者：vipbic链接：https://segmentfault.com/a/1190000022736837
2020-08-10 10:26:55
71
原创 代替多个if判断的另一种方法
代替多个if判断的另一种方法对于if的使用大家都不陌生，也是js中常用语法，很好用，但是面对处理大量数据，需要多个if判断时，写在我们的项目中就显得low，自己写起来也有些吃力，这里推荐一个小技巧，利用json类型来处理它举个小例子，大家可以根据项目情况来参考传统方式代码 // ------------传统方法------------------ // 获得来的node数据，每次操作只返回一个node，比如省市区联级，点击一个级别就返回一个node co
2020-08-10 09:33:52
1372
1
原创 select组件的二次封装
封装后的select.vue组件代码<template> <div> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in initNewOption" :key="item.value" :label="item.label" :
2020-08-08 15:40:26
790
原创 小程序中遇到 data is read only 的只读问题
小程序开发中，统一添加一个接口发起的渠道标识，而对data进行处理//app.jsApp({ globData:{ sysInfo:{} }, async onLaunch () { this._processAsync() this.globData.sysInfo=await wx.getSystemInfo() }, _processAsync(){ wx.requestAsync=function(params={}){ con
2020-06-04 11:14:45
7448
3
原创 解决跨域问题
一、jsonp方法原理：通过动态生成script标签来调用服务器提供的js脚本jsonp的封装：<button id="btn1">点我发送请求</button> <button id="btn2">点我发送请求</button> <script type="text/javascript"> // 获取按钮 var b...
2020-04-23 17:16:17
122
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人