防抖与节流运用(封装)
防抖与节流运用(封装)防抖:123456789101112131415// 防抖,当用户操作较为频繁时,只发送最后一次结果作为请求 // 在这里我用的时ts写的,对于传入的值有严格的效验 let Trembling=(fn:Function,deplay:number)=>{ let timer:any = null return ()=>{ if(timer!==null) {clearTimeout(timer)} timer=setTimeout(()=>{fn()},deplay); } }// 运用 当用户在输入框时(间隔1.5s内)频繁输入,取最后一次结果为准// 调用时应遵循Trembling函数参数里面的type let changes=Trembling(()=>{ // 所有的业务逻辑代码放置在这里 console.log("前端深造中") },1500)
节流:在这里节流我并没有封装,有兴趣的小 ...
VUE + EleMent Ui Form表单的二次封装
VUE + EleMent Ui Form表单的二次封装开箱即用
使用说明
文件里边一共有三个文件,Form是一个封装好的组件,用的时候直接使用标签就好,checkfun.js是一个专门处理校验函数的文件,regexp.js则是存放校验规则的文件,你所有的规则都可以放在这里面
注意因为是组件,所以这些东西一并放到Components下面,为了防止出错,你可以直接把我的整的文件一起拖拽进去
Form的使用
| 参数 | 说明 | 类型 | 可选值 | 默认值 || ———— | ——————————— | ———- | ————— | ——— || ruleForm | 表单数据对象 | Object | — | — || rules | 表单验证规则 | Object | — | — || erricon | 正确错误提示 | Boolean | true/false | false || ...
js中判断是否对象的方法
目前据我所知的方法共有三种1. typeof12let obj ={a:1,b=2,c:3}console.log(typeof(obj)) //返回'object'
从判断结果上来看,似乎并没有太大的问题,但如果你把对象改为数组,他返回的也会是同样的结果,因此不推荐这种写法,对于数组、函数、对象来说,其关系错综复杂,使用 typeof 都会统一返回 “object” 字符串,null也会返回’object’对NaN返回是’number’感兴趣的小伙伴可以自己动手实现一下
2. instanceof Object1234let obj ={a:1,b=2,c:3}let arr =[1,2,3]console.log(obj instanceof Object) //返回'true'console.log(arr instanceof Array) //返回'true'
这种方法返回的是boolean类型,基本可以实现我们想要的结果,不仅这样,它还可以判断是否为数组,讲到这里,还有种判断 ...
vue页面刷新
vue页面刷新首先我们都知道vue属于单页面应用,默认境况下是不会触发刷新页面操作的,所以这个时候就需要我们通过事件来触发reload()来达到刷新操作接下来我就为大家介绍三种刷新页面的方法1.1wiindow.location.reload([bForceGet])
该方法强迫浏览器刷新当前页面bForceGet 可选参数,默认为false,从客户端缓存里取当前
true,则以get方式,从服务器端获取最新的页面,相当于页面f5刷新
1wiindow.location.replace(URL)
该URL参数未你所要跳转的地址,如果想实现当前页面刷新,你可以这样做
1wiindow.location.replace(location.href)
2.1this.$router.go(0)
经常使用vue的小伙伴看到这个应该很熟悉吧,我们经常用它来实现前进后退,但别忘了它还可以实现自身页面刷新
3.对于以上两种方法,虽然都可以实现页面刷新,但页面会刷的白一下,给用户的体验非常不好3.利用provide/inject组合方式是我目前觉得最好用的方法,下面我们就来详细介绍其用法
首先在我们的 ...
pdf文件预览
1.为了实现手机端pdf文件预览,花费了我整整一天,不,准确的说是一天多,不过现在回头想想,其实也没有那么的难,可能也是自己当初没有接触过吧,要怪只能怪自己还是一直小菜鸟,没啥见识,为自己的学习之路留下一片痕迹,做下总结:2.pdf包下载这个包是我之前下好的,当然你也可以到官方中去下载,都是可以的 官方链接地址3.下载好之后直接将包放进我们的项目中来,在此之前你要搞清楚pdf.js它主要原理是在一个页面中嵌套另一个页面,如果你使用是vue框架可以直接将他怼到public文件夹下,项目目录结构大致为下4.然后我们打开pdf/web/viewer.html,可以看到此文件打开之后里面要放的就是我们文件5.再然后打开同级目录下方的viewer.js文件,然后来看这句代码很明显默认路径为一个变量,我们再来找一下这个默认变量是什么默认路径为空,啥也没有,所以我们打开viewer.html为空,呐,接下来我们就在这里指定一下默认路径,看打开后是什么样子当我们指定路径后在此打开viewer.html时,就为我们上方指定的默认路径6.接下来再看一代码很明显这是一则三目运算如果我们传参,将使用我们参数后 ...
vue点击导航 页面自动滚动到特定位置
vue点击导航 页面自动滚动到特定位置效果预览:
11.npm i element-ui -S
下载安装element组件库,导航我们使用element组件库中的样式,type=”primary”刚好作为我们导航激活后的样式,省去了我们写样式的时间
12.到 main.js 文件中全局引入element组件
1234import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);
13.代码实现:
123456789101112131415161718192021<!-- 为每一个按钮 添加点击事件 用来作为按钮的切换 我们将所有的按钮导航装到 一个div中,给这个div添加点击事件就可以了(不知道为什么的小伙伴可以去看一下事件冒泡) 由于进入页面要有默认激活项,我们将data属性中的active赋值为1,就可以了,每次点击,只需要通过 访问dataset中的属性动态的赋值给active就 ...