- 博客(60)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 vue中transition内置组件的用法
当vue中，显示隐藏，创建移除，一个元素或者一个组件的时候，可以通过transition实现动画。如果元素或组件离开，完成一个淡出效果：<transition name="fade"> <p v-if="show">100</p></transition>.fade-leave { opacity: 1}.fade-leave-active { transition: all 1s;}.fade-leave-to {
2022-01-22 17:14:14
551
原创 js递归案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><script> //求n个数的累加 //getSum(1) = 1 //getSum(2) = 2+1 //getSum(3) = 3+2+1 //getSu
2022-01-09 15:57:40
203
原创 js去掉两端空格的兼容函数
//封装 去掉两端空格的兼容函数 function trim(str) { return str.replace(/^\s+|\s+$/g, ""); }
2022-01-09 15:44:17
394
原创 事件对象兼容处理封装
var eventUtils = { getEvent: function (event) { return event || window.event; }, getPageX: function (event) { return event.pageX || event.clientX + document.documentElement.scrollLeft; }, getP
2022-01-09 11:17:21
152
原创 js注册和移除事件的兼容函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><button id="btn1">按钮</button><button id="btn2">按钮</button><script> var
2022-01-09 11:04:41
225
原创 js事件对象中目标对象的兼容写法
document.addEventListener('click',function(event){ var event = event || window.event var target = event.target || srcElement // target指向的是触发事件的根源 console.log(event.target) // this指向的是绑定者 console.log(this) alert('文档
2022-01-09 09:59:51
216
原创 js取消冒泡的兼容写法
function stop(event){ if(event.stopPropagation){ event.stopPropagation() }else{ event.cancelBubble = true } }
2022-01-08 22:11:19
220
原创 js实现图片放大镜效果
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
2022-01-08 21:39:09
359
原创 js封装获取鼠标在页面上的坐标兼容函数
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
2022-01-08 16:49:17
74
原创 总结offset、scroll、client
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
2022-01-08 16:04:09
64
原创 封装一个获取浏览器可视区宽高的兼容函数
window.addEventListener('resize',function(){ console.log(client().height) console.log(client().width) }) // 获取浏览器可视区的宽高 function client(){ return { width: window.innerWidth || document.documentElement.clientWidth .
2022-01-08 14:56:06
194
原创 js实现多个属性同时做缓动动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2022-01-07 18:28:00
133
原创 js实现手风琴效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2022-01-07 18:26:53
262
原创 js获取页面body被卷去的距离
window.addEventListener('scroll',function(){ console.log(scroll().top) }) function scroll(){ return { top:window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
2022-01-06 18:18:52
380
原创 写一个可拖拽的盒子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2022-01-05 14:22:04
162
1
原创 选择Array中倒数第二项的不同方法
// 数组及数组元素。const colors = ['red', 'green', 'blue'];// 使用长度属性。const lengthWay = colors[colors.length-2];console.log(lengthWay); // 'green'// 使用 slice() 方法。注意会返回一个数组。const sliceWay = colors.slice(-2, -1);console.log(sliceWay[0]); // 'green'// 使用 a
2022-01-04 16:52:18
849
原创 获取全局对象和bind方法的注意项
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-12-14 14:12:11
99
原创 数组的Array.from方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-12-13 13:23:23
575
原创 vue3.0依赖注入
provide和inject用来向后代组件传递数组，也是遵循的是单项数据流看代码：在祖先组件中，定义provide数据，如果是响应式的，必须要用ref或者reactive来定义<template> App根组件 --- {{money}} <hr> <Son /></template><script>import {provide, ref} from 'vue'import Son from './son.vue'ex
2021-12-12 21:29:56
434
1
原创 vue.3.0关于v-model的语法糖
vue3.0项目中关于父子组件传值时，可以使用v-model语法糖简化自定义事件写法，并且可以传递多个参数父组件中的写法：<template> App根组件 --- money --- {{money}} App根组件 --- age --- {{age}} <hr> <Son v-model:money="money" v-model:age="age"></Son></template><script>i
2021-12-12 20:05:59
567
原创 vue3.0的watch监听
<template> <div>count的值为---{{count}}</div> <button v-on:click="addCount">count的值加1</button> <hr> <div>num的值为---{{obj.num}}</div> <button v-on:click="addNum">num的值加1</button> <hr>
2021-12-12 19:16:42
491
原创 js检测数据类型的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-12-08 16:15:16
351
原创 js中各数据类型的toString方法的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-12-08 14:30:59
716
原创 try/catch/finally 执行谁更厉害
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-12-08 13:15:29
63
原创 js生成随机数和随机字符串
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-12-08 11:21:44
346
原创 深拷贝和浅拷贝
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
2021-12-07 22:13:54
181
原创 构造函数 + 原型 = 组合式继承
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-12-07 13:52:25
212
原创 js数组扁平化
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-12-07 13:19:28
52
原创 宏任务与微任务
1、什么是宏任务和微任务javaScript把异步任务又做了进一步的划分，异步任务又分为两类，分别是：1、宏任务：异步ajax请求setTimeout、setInterval文件操作其他宏任务2、微任务promise.then、.catch和.finallyprocess.nextTick其他微任务2、宏任务和微任务的执行顺序每一个宏任务执行完之后，都会检查是否存在待执行的微任务，如果有，则执行完所有微任务之后，再继续执行下一个宏任务代码一、<!DOCTYPE html&g
2021-12-02 22:26:42
79
原创 js的同步任务与异步任务
1、javaScript是一门单线程执行的编程语言，也就是说，同一时间只能做一件事单线程任务队列的问题：如果前一个任务非常耗时，则后续的任务就 不得不一直等待，从而导致程序假死的问题。2、为了防止某一个耗时任务导致程序假死的问题，JavaScript把待执行的任务分为了两类：1、同步任务又叫非耗时任务，指的是在主线程排队执行的那些任务只有前一个任务执行完毕，才能执行后一个任务2、异步任务又叫耗时任务，异步任务由JavaScript委托给宿主环境进行执行当异步任务执行完成后，会通知
2021-12-02 21:46:55
930
原创 防抖与节流
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
2021-11-23 22:33:20
65
原创 结合发布订阅模式手写vue指令v-text、v-modle
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
2021-11-21 12:20:19
453
原创 el-table使用排序功能，并且返回主页时将排序的顺序状态保留，显示高亮
用el-table做了一个6列的花名册列表，要求是每一列都是要有排序功能，并且排序是后端完成的，排序的状态列，只有一列是高亮的，而且退出到主页时，还要保留之前的筛选的状态高亮1、首先要给需要排序的列设置sortable=‘custom’，表示该列开启排序功能，并且需要后端排序 <el-table-column label="公司部门" prop="dept" :show-overflow-tooltip="true" min-width="90%" sortable='custom' >
2021-03-11 13:53:28
2126
原创 VUE项目从详情页退回列表页，保留列表页的筛选条件（筛选条件为单选），以及刷新后恢复默认的一个筛选状态
vue项目做的一个“花名册”页面，从“花名册”页面可以点击某一个人的名字，进入这个人的信息详情表格页面，而且这个人的信息详情页面中有一个“直属上级”字段时可以点击跳转的，点击以后跳转到该汇报人的信息详情页面，汇报人里还有汇报人，以此类推，大概有4层到5层的跳转。现在的需求是，筛选框有3种状态，每一种状态里只能选择一种分类。如果后退时，必须是原路返回，一层一层的往出退，不能直接退到“花名册”页面，并且退到最外层“花名册”页面时，必须要保留之前的筛选条件1、点击姓名进入个人信息页一开始，我把获取个人信息放
2021-03-10 15:09:21
2923
原创 react组件嵌套时的生命周期执行顺序以及，生命周期钩子函数执行顺序
最近在学习react这个框架组件发生嵌套时，生命周期的钩子函数是如何执行的父组件创建阶段的生命周期钩子函数 constructor父组件创建阶段的生命周期钩子函数 render子组件创建阶段的生命周期钩子函数 constructor子组件创建阶段的生命周期钩子函数 render子组件创建阶段的生命周期钩子函数 componentDidMount父组件创建阶段的生命周期钩子函数 componentDidMount...
2021-02-25 14:40:00
407
原创 table标签+tooltip+js，做溢出隐藏，鼠标经过提示全部内容（封装模块）
首先说的是，本项目是vue项目，开发使用的是大屏显示器，而在小屏笔记本中，表格中的字段会出现换行的，需要调整；我之前是做过不同屏幕大小的适配的，整体来说还是可以的，但是在小屏的时候，还是要做特殊处理的，本文就是将，一个table表格里展示员工的信息时，文字的长度如果超出了单元格的宽度，就提出隐藏，显示省略号，鼠标经过显示tooltip提示框全部内容1、设置整个table表格中单元格的溢出隐藏 table { width: 100%; border-collaps
2021-02-10 11:09:27
746
原创 当登录功能不在自己的项目中时，如何做全局守卫，防止用户直接进入首页
用到的依然是全局导航守卫// 路由守卫,防止用户直接访问“花名册”和“个人信息页面”router.beforeEach((to, from, next) => { // 首先判断是要跳转到登录页面 if (to.path == '/AllUserinfo' || to.path == '/roster') { // 如果不是跳转到登录页面，那就获取一下token，判断是否携带token字符串 const tokenstr = window.sessionStorage.g
2021-01-26 15:38:20
107
原创 vue项目中，axios如何捕捉http状态码为401错误
项目开发中，需要判断一下token是否有效，如果是一个无效的token，那么后台后返给我http状态码为401的错误，注意这里是http状态码，也就说只有是2xx系列的才算是请求成功，所以返回的401，此时浏览器肯定时报错的，如果你正常的逻辑去拿包，肯定是拿不到的。这种情况下，就要用到axios的响应拦截了在main入口文件下写// 响应拦截axios.interceptors.response.use(function (response) {// 这个是处理响应成功的结果，也就是说响应状态码为
2021-01-26 15:22:16
6122
3
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人