3 donggua_123

尚未进行身份认证

暂无相关简介

等级
TA的排名 4w+

几个javascript代码相关的简洁优化方法

1、条件判断Array.includes()这是业务中最常见的情景之一看代码:functionisOk(color){if(color==='red'||color==='yellow'){returntrue;}else{returnfalse;}}一个简单的条件判断,如果判断条件较少时,...

2019-11-12 16:32:41

移动端H5下载文件

前段时间遇到一个需求,需要在H5页面中增加下载文件按钮,下载一个压缩文件,第一个想到的当然是最普遍和常用的方法:动态生成a标签,把链接地址给到href属性,触发一个click事件,完美下载。于是撸起袖子就开干。由于文件数据是通过接口请求回来的数据流,application/octet-stream类型,需要转换一下来使用:download(){...

2019-11-12 11:27:16

vue-draggable-resizable定制化可拖动控件

最近遇到一个需求:前端定制化生成合同模板,生成时可以在指定位置拖放指定的控件,可动态编辑指定控件的属性和位置,最后将控件的位置等属性传给后台,后续使用模板签署合同时,乙方可在模板上指定位置签署。点击左边控件列表=》添加控件到文件上=》点击文件上的控件激活该控件=》编辑该控件的相关字段=》提交数据控件类型有多种,支持多个控件同时添加,文本类型支持长宽拉伸设置刚好有一个很好用的v...

2019-10-15 22:22:24

vue根据权限动态渲染按钮、组件等的函数式组件实现方式

前端工作中对于权限的需求是难免的,最近项目中就有这样的需求了。后台管理员可以新增前台成员,不通的成员具有不同的权限,有权限的人员可以看到一些操作按钮或者数据列表,反之则看不到。那么也就是说,前端需要根据登录用户的权限来渲染指定的dom。1、components文件下新建authorized文件夹,文件夹下新建auth.js校验权限constcheckAuth=(authNa...

2019-10-03 15:58:10

vue-extend和vue-component注册一个全局组件

extend()是一个全局构造器,生成的是一个还没挂载到页面元素上的组件实例。在全局挂载插件的形式全局注册,就需要用到vue.use()方法,官方文档:所以插件必须是一个对象,并且提供install方法,注册的时候自动调用该方法。所以组件的写作步骤就清晰了一些了,实践出真知,现在就来练习一下写一个简约版的全局alert弹框1、在components文件夹下新建alert文件夹,...

2019-10-03 11:23:09

vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法

项目中使用element-ui时,message弹框功能是必须使用的,有时会在点击按钮时提示无权限,或者请求报错时给出适当提示:但是重复点击按钮或者同一个页面多个请求同时报错时,就不美观了可以看到,element-ui是动态往页面根节点插入message元素来实现弹框效果的,都拥有el-message属性那么我们就可以通过判断页面中message的个数来决定要不要弹出第...

2019-09-24 16:04:33

css实现文字自定义下划线

1、文字下划线的实现可以使用原生api:text-decoration:underline.words{font-size:22px;text-decoration:underline;}但是没法调整下划线和文字的间距,太贴文字了也不好看2、于是就有了第二种方法:边框法,就是利用元素的下边框实现下划线的效果,还可以通过line-height调节距离...

2019-09-20 15:47:29

前端js下载文件压缩包

工作当中时常会遇到对文件的一些处理,比如下载表格、下载图片、下载文件等,这里说一种下载压缩包的方法。其实也很简单,需要用到一款插件jszip,官方用法都是有的:https://www.npmjs.com/package/jszip可以直接引入脚本:<scriptsrc='./jszip.js'></script>也可以在vue项目中直接安装,运行:...

2019-09-20 10:03:20

文件预览或下载中,axios设置responseType:blob时对于后台报错信息的捕获兼容

项目中难免会遇到预览文件或者下载文件的场景,如果后台返回的是base64或者图片格式还好说,文件信息直接放在返回body里,作为对象属性给到前端,很直观,也方便取用。但后台给到的是文件流就要麻烦一些了,一般来说文件流会直接凡在res.data里处理这种特殊返回值时需要设置axios的responseType为blob,防止axios内部默认处理返回值,导致无法解析:axios.g...

2019-09-01 16:58:06

vue不用window的方式刷新当前页面

vue项目中我们很多时候需要刷新页面,比如本地用户信息更新后,或者需要重新加载当前页面的数据时,使用window.location.reload()或者window.history.go(0)方法都是整个窗口的刷新,和h5快捷键一样,会有短暂空白出现,体验很不好,这里说两种在vue项目里使用的无感知刷新页面方法:一、provide/inject方法父组件中provide提供的属性可以在任何...

2019-05-20 21:38:50

H5项目中有滚动元素,ios系统拖动默认行为和滚动事件冲突解决

问题:h5页面,在ios系统中,拖动顶部固定元素(红色区域)时,会默认拖动整个浏览器,导致出现白色背景,影响到自定义的滚动事件(橙色区域),因为自定义滚动是用了ui框架的,会导致其短暂的无法滚动,必须要等整个页面停稳了才能滚动橙色区域,影响到体验。这应该是ios系统自带的缓动效果,当用户拖动页面元素时给了一个回弹吸顶的效果,显得更加柔和,但有时候我们是不需要的。想要的效果:到顶后继续向下滑...

2019-05-04 18:07:15

作用域和闭包

一说到javascript里的闭包,大部分人都好像有所耳闻,但又说不太清楚到底是个什么东西。那么闭包到底是何方神圣呢?闭包是javascript中非常常见,但是又非常神秘的一个概念,有多少人像我一样,看了好多关于闭包的技术文章,却始终没能彻底搞懂闭包的深层次原理,经常是面试前突击一下闭包相关的文章,似懂非懂,过段时间后又几乎全忘了,只留下些残破的似是而非的记忆。今天我尝试着来总结一下我自己...

2019-04-11 21:10:06

vue组件通信方式小结

vue项目中,组件间的通信是最常用到的,也是面试必问的问题之一。组件通信可以分为几种类型:1、父子通信1.1父传子1.2子传父2、跨级传递2.1祖父传孙3.1孙传祖父3、同级组件间通信首先说一下通用的方式,即不管哪种场景都在功能上可以实现,撇开具体场景的适合程度,其实也就是全局的通信方式。一、vuebus以vue实例为总线,...

2019-04-01 22:34:00

自定义v-model用法

在vue中,v-model是用来进行数据双向绑定的一个语法糖,比如说用在input上,输入框数据变化,v-model绑定的对应的值也会跟着变化,无需单独获取。其实v-model还可以在自定义组件中使用,可以被拆解为props:value和event:input,也就是说组件必须接收一个value值以及名为input的自定义事件,就可以在自定义组件上使用v-model了。新建一个组件Inpu...

2019-03-31 20:39:01

pc端多页面公用回到顶部功能

在pc端,页面超过可视区高度后便会有滚动条,那么回到顶部的功能就必不可少了。现在我面临的情况:1、点击回到顶部,默认隐藏,滚动超过一定距离才显示回到顶部icon2、部分页面不需要回到顶部功能,比如登录、修改密码等模块;3、滚动效果的实现使用的是element-ui的scrollbar组件,看了下源码,并没有向外派发任何事件,仅仅实现了滚动效果,不提供诸如下拉刷新、回到顶部、返回滚动...

2019-02-27 20:12:29

当better-scroll 遇上element-ui时,dialog的层级问题处理

现在越来越多的开源工具使得开发效率大大提高,让开发者从繁琐的样式编写等工作中抽离出来,专注于前端逻辑的编写,很多时候只需要找到不同的工具、零件,按照自己的业务需求拼装在一起就是一辆很棒的车。只是不同的工具,组件也好、插件也好,都是由不同的人员开发维护的,属于独立的项目,但当我们要造车的时候,拿过来的零配件可能就有些地方无法相互兼容,比如多了个凹槽,导致两个零件无法很好的组装,这就需要手动去抹平这些...

2019-02-02 11:34:27

javascript中的this的四种绑定方式

在面向对象的编程中,最常用到的就是this关键词。this是在执行函数时绑定的,而不是在声明的时候绑定的,他的上下文取决于函数调用时的各种条件,和声明的位置没有关系,只和调用的位置有关。this有四种绑定方式:第一种:默认绑定vara=9;functionabc(){console.log(this.a)}abc()//9在这段代码中,this....

2018-12-20 21:09:34

小程序购物车功能(支持手动输入数量)以及侧边栏和列表栏联动的实现

小组刚完成一个小程序项目,第一版正式发布了,过程中也遇到了很多问题,这里记录一下我负责的模块中的购物车功能的实现过程。后期再把其他小伙伴的模块也一并贴上来分析一下,自己也学习一下他们的独门技能!效果图如下:在这里,计数器、购物篮做成组件用于复用,由于左右联动的功能在另一个模块也有用到,所以就把这个功能也做成了一个组件,传入不通的数据即可,左右联动的实现方法在之前一片博客有写到htt...

2018-09-17 11:08:24

flex布局换行后均匀分布

今天做一个需求的时候发现一个问题,原型需要做出这样的布局效果首先想到的肯定是flex布局display:flex;justify-content:space-between;flex-wrap:wrap;嗯,确实达到了效果,完美!!但是当数据不是4的倍数的时候,就出现问题了可以看到最后一排依然遵循均匀铺开在父级宽度里面,但这显然不是我们想要的效果如果...

2018-09-12 16:02:24

vue在新窗口打开页面的方法

有时候后我们会需要在一个新窗口打开页面,而我们都知道,vue是单页面的应用,通过router在内部跳转的。但是依然有办法实现这个需求。刚开始在网上找了一下,有两种方式,一种是给outer-link标签添加tag=a跳转打开新窗口,亲测有效。<router-linktag="a"target="_blank":to="{name:'detail',query:{goodsId:'...

2018-08-14 19:14:42

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。