web前端
web老张头
学无止境,仗剑天涯
展开
-
VUE页面导出PDF方案
1,技术方案为:html2canvas把页面生成canvas图片,再通过jspdf生成PDF文件;原创 2023-11-09 17:09:30 · 1976 阅读 · 1 评论 -
js为啥是设计成单线程而不是多线程呢
js为啥是设计成单线程而不是多线程呢原创 2023-07-11 16:09:37 · 503 阅读 · 0 评论 -
elementplus el-date-picker自定义内容设置
【代码】elementplus el-date-picker自定义内容设置。原创 2023-06-10 15:38:29 · 2206 阅读 · 0 评论 -
vue3 vant 高德地图选择位置
vue3 vant 高德地图选择位置原创 2023-03-09 15:08:36 · 1214 阅读 · 0 评论 -
vue3+naiveui 富文本编辑器封装公共组件
vue3+naiveui 富文本编辑器封装公共组件原创 2023-02-16 10:39:30 · 753 阅读 · 1 评论 -
vue3+naiveui 图片文件上传封装组件
vue3+naiveui 图片文件上传封装组件原创 2023-02-16 10:31:04 · 3043 阅读 · 1 评论 -
vue3+naiveui 批量新增
vue3+naiveui 批量新增实现方式原创 2023-02-15 17:22:54 · 381 阅读 · 0 评论 -
从零到一建立前端规范
规范能给我们带来什么好处,如果没有规范会造成什么后果?这里主要拿代码规范来说。转载 2023-02-07 08:52:31 · 167 阅读 · 0 评论 -
如何下载node不同的版本
英文网址:https://nodejs.org/en/download/中文网址:http://nodejs.cn/download/故下载一下红色框中文件 ,版本为v6.10.0。原创 2022-09-22 15:33:50 · 2131 阅读 · 0 评论 -
vue3+naive 表格列表显示图片
Naive的表格进行多个或单个图片查看时,结合render的h函数进行,NImage(import { NImage } from "naive-ui";),点击可查看对应大图原创 2022-06-21 19:48:43 · 1342 阅读 · 0 评论 -
vue3+naive 树tree的子节点点击事件
naive的api官方,@update:selected-keys事件是根据选中项是否变化来监听的,所以点击会出现点击一次能获取到值,点击一次却是空的情况;所以需要采用:node-props="checkCamera"的形式,参数从option中获取;...原创 2022-06-11 16:16:55 · 1682 阅读 · 2 评论 -
js的防抖和节流,不同场景的应用
真正搞懂js的防抖和节流函数的应用场景原创 2021-12-27 23:07:42 · 75 阅读 · 0 评论 -
js 判断字符串对象
function isString(str){ return Object.prototype.toString.call(str) == "[object String]";}注:typeof只能判断是否为字符串,二者共同判断时;jQuery源码中toString = Object.prototype.toString* isString(new String('hello')) = true* isString('hello') = tru...原创 2021-05-12 22:30:06 · 1254 阅读 · 0 评论 -
echarts点击事件多次执行问题修复
在on事件之前先执行off事件;原创 2020-12-03 15:15:07 · 373 阅读 · 0 评论 -
el-date-picker 开始月份和结束月份选择区间不交叉设置
开始月份和结束月份选择区间不交叉设置: 开始月份:<el-date-picker v-model="formdata.dateA"type="monthrange"range-separator="至"start-placeholder="开始月份"end-placeholder="结束月份"value-format="yyyyMM":picker-...原创 2020-11-26 13:46:01 · 969 阅读 · 0 评论 -
echarts label的formatter自定义设置样式
rich的a对应到formatter里面涵盖的对应内容,示例为type:"pie":原创 2020-11-26 13:37:47 · 15286 阅读 · 1 评论 -
js 日期格式转换
1,将"20180604231436"转换为2018-06-04 23:14:36,支持8位、10位、12位、14位的转换:let occurTime = "20180604231436"; //原字符串 console.log(dateFormat(occurTime)); //调用方式 function dateFormat(date){ let newOccurTime; if(date.length==14){ ne...原创 2020-11-25 09:21:17 · 773 阅读 · 0 评论 -
vue中导出功能
//导出bjkacrjrybhtjExport为接口名,this.form是参数exportExcel(){bjkacrjrybhtjExport(this.form).then(res=>{consttype="application/vnd.ms-excel;charset=utf-8";//excel文件//consttype="application/x-msdownload;chars...原创 2020-11-17 14:28:50 · 379 阅读 · 0 评论 -
element input输入框格式校验
1,禁止输入特殊字符:global.js中设置://文本输入框的特殊字符禁止输入Vue.prototype.validSpecialZf=function(valInput){valInput=valInput.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/g,'').replace(/\s/g,'');return...原创 2020-11-17 14:16:06 · 3883 阅读 · 0 评论 -
echarts柱状图的背景色设置
echarts柱状图的背景色设置方法,官方推荐的例子中是又添加一组最大值来当背景(不建议),设置backgroundStyle即可:series:{name:'违法违规国家排行',type:'bar',barWidth:'15',showBackground:true,back...原创 2020-09-17 16:24:58 · 26893 阅读 · 7 评论 -
echarts type: ‘pictorialBar‘的双圆形柱状图第一个数据为0时多出来一条线
3.0中支持barMinHeight:1的设置,立体柱状图能显示一个底圈,这样线圈就不会出现。原创 2021-12-27 16:13:44 · 973 阅读 · 1 评论 -
echarts tooltip自动轮循显示
方法定义://echarts动效chart是echarts对象,op是echarts的内容,sec是动画时间间隔dynamic(chart,op,sec){op.currentIndex=-1;lettimer;timer=setInterval(function(){letdataLen=op.series[0].data.length...原创 2020-09-03 10:21:50 · 952 阅读 · 0 评论 -
echarts tooltip样式设置
tooltip:{trigger:"axis",axisPointer:{type:"shadow",//背景色shadowStyle:{color:"rgba(0,246,255,0.1)"//背景色设置...原创 2020-09-03 10:17:11 · 4603 阅读 · 0 评论 -
echarts 柱状图每个柱子的默认背景色添加
在series中设置如下(避免使用barGap: '-100%', ): showBackground:true,backgroundStyle:{color:'rgba(22,208,144,0.15)'},...原创 2020-09-02 10:03:09 · 5868 阅读 · 2 评论 -
vue3 添加postcss-pxtorem,浏览器窗口放大缩小内容也放大缩小
vue.config.js中配置如下,单独的rem.js配置完后在main.js中import即可。原创 2020-08-21 15:28:57 · 1136 阅读 · 0 评论 -
element ui 输入框只能输入数字限制
<el-inputv-model="formAdd.xh"placeholder="请输入序号"maxlength="2"@input="formAdd.xh=formAdd.xh.replace(/^(0+)|[^\d]+/g,'')"...原创 2020-08-20 16:07:51 · 1830 阅读 · 0 评论 -
vue中实现打印功能
1,引入print.js ,放入项目路径中;2,在页面中引入js文件后在打印方法里面调用方式如下:引入:import printJS from "@/assets/js/print.js";调用:```// printable是打印目标的div的id名称,print.min.css是自己创建css,调整打印文件样式printJS({ printable: 'printTarget'...原创 2020-04-16 16:19:48 · 2087 阅读 · 0 评论 -
blob excel文件导出
vue 项目中excel文件导出:exportData(){//点击方法名称jjrExport(this.years).then(res=>{//this.years为请求参数console.log(res);consttype="application/vnd.ms-exce...原创 2020-04-15 11:56:59 · 2819 阅读 · 0 评论 -
js前端面试题03
1,内存泄露的排除定位和解决方法答:内存泄漏就是有资源未被内存池回收,释放出来占用内存,表现为程序卡死或者浏览器卡死状态;通过谷歌浏览器的performance来监测;内存泄漏的几个方式:全局变量的声明,未带var关键字的,可在js文件中用use strict;定时器的应用,未有结束定时器的操作,导致一直执行定时器任务;闭包中无用的方法执行,不能被回收,就一直占用内存。2,websoc...原创 2020-02-27 22:05:37 · 141 阅读 · 0 评论 -
js面试题-02
1,webpack工程构建工具怎么样用答:webpack是一款模块打包器,可以将项目中的js,css,less,sass,图片等打包压缩成对应的文件。通过定义一个入口文件,webpack会自动查找相关依赖的文件,使用loaders处理它们,最终生成浏览器能识别的js文件。npm或cnpm安装webpack后,再配置webpack.config.js,入口文件、出口文件、loaders加载器...原创 2020-02-26 15:36:31 · 141 阅读 · 0 评论 -
前端面试集锦-01
1,你项目里用到第三方登录涉及的oAuth(JWT)协议的实现原理,以及你本地的实现原理,第三方登录怎么样保证安全性 答:oAuth就是开放的授权,第三方登录,就是本地的项目跳转到第三方登录去访问,比如登录第三方qq,先输入用户名密码去登录后获得一个code,第三方再返回一个虚拟账户,然后再去第三方请求token,设置有效期;安全性的保证就是设置有效期,生成虚拟账户正常登录访问。2,...原创 2020-02-26 00:00:27 · 150 阅读 · 0 评论 -
navicat 10.0.50注册码
原创 2017-03-08 16:53:00 · 984 阅读 · 0 评论 -
腾讯地图可搜索定点位置
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>测试功能页面</title> </head> <body> <iframe id="mapPage" width="100%" height="300" frameborder=0 src="http:原创 2017-01-16 13:35:12 · 3930 阅读 · 1 评论 -
javascript 设计模式-中介者模式
先来理解这么一个问题,假如我们前端开发接的需求是需求方给我们需求,可能一个前端开发会和多个需求方打交道,所以会保持多个需求方的联系,那么在程序里面就意味着保持多个对象的引用,当程序的规模越大,对象会越来越多,他们之间的关系会越来越复杂,那现在假如现在有一个中介者(假如就是我们的主管)来对接多个需求方的需求,那么需求方只需要把所有的需求给我们主管就可以,主管会依次看我们的工作量来给我们分配任务,这样转载 2017-02-15 11:24:15 · 256 阅读 · 0 评论 -
javascript 设计模式-策略模式
1. 理解javascript中的策略模式策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。使用策略模式的优点如下:优点:1. 策略模式利用组合,委托等技术和思想,有效的避免很多if条件语句。 2. 策略模式提供了开放-封闭原则,使代码更容易理解和扩展。 3. 策略模式中的代码可以复用。一:使用策略转载 2017-02-15 11:23:01 · 170 阅读 · 0 评论 -
javascript 设计模式-模板方法模式
模板方法模式由二部分组成,第一部分是抽象父类,第二部分是具体实现的子类,一般的情况下是抽象父类封装了子类的算法框架,包括实现一些公共方法及封装子类中所有方法的执行顺序,子类可以继承这个父类,并且可以在子类中重写父类的方法,从而实现自己的业务逻辑。比如说我们要实现一个JS功能,比如表单验证等js,那么如果我们没有使用上一章讲的使用javascript中的策略模式来解决表单验证封装代码,而是自转载 2017-02-15 11:21:59 · 221 阅读 · 0 评论 -
javascript 设计模式-命令模式
命令模式中的命令指的是一个执行某些特定事情的指令。 命令模式使用的场景有:有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道请求的操作是什么,此时希望用一种松耦合的方式来设计程序代码;使得请求发送者和请求接受者消除彼此代码中的耦合关系。我们先来列举生活中的一个列子来说明下命令模式:比如我们经常会在天猫上购买东西,然后下订单,下单后我就想收到货,并且希望货物是真转载 2017-02-15 11:21:01 · 156 阅读 · 0 评论 -
javascript 设计模式-职责链模式
优点是:消除请求的发送者与接收者之间的耦合。 职责连是由多个不同的对象组成的,发送者是发送请求的对象,而接收者则是链中那些接收这种请求并且对其进行处理或传递的对象。请求本身有时候也可以是一个对象,它封装了和操作有关的所有数据,基本实现流程如下:1. 发送者知道链中的第一个接收者,它向这个接收者发送该请求。2. 每一个接收者都对请求进行分析,然后要么处理它,要么它往下传转载 2017-02-15 11:20:16 · 175 阅读 · 0 评论 -
javascript 设计模式-代理模式
代理是一个对象,它可以用来控制对本体对象的访问,它与本体对象实现了同样的接口,代理对象会把所有的调用方法传递给本体对象的;代理模式最基本的形式是对访问进行控制,而本体对象则负责执行所分派的那个对象的函数或者类,简单的来讲本地对象注重的去执行页面上的代码,代理则控制本地对象何时被实例化,何时被使用;我们在上面的单体模式中使用过一些代理模式,就是使用代理模式实现单体模式的实例化,其他的事情就交给本体对转载 2017-02-15 11:19:33 · 191 阅读 · 0 评论 -
javascript 设计模式-模块模式
我们通过单体模式理解了是以对象字面量的方式来创建单体模式的;比如如下的对象字面量的方式代码如下:var singleMode = { name: value, method: function(){ }};模块模式的思路是为单体模式添加私有变量和私有方法能够减少全局变量的使用;如下就是一个模块模式的代码结构:转载 2017-02-15 11:18:37 · 197 阅读 · 0 评论