ju__ju的博客

前端通过html2canvas将dom节点生成对应的PDF

字符串中根据索引删除指定重复字符串

el-scrollbar 使用技巧,锚点操作,锚点跳转

结合echarts论坛的案例,根据项目需要修改的echarts3D饼图

轮播图轮播图轮播图

upload,ant-design-vue,

如图,echarts中柱状图如果xAxis对象没有配置data属性,那么X轴上的名称就显示不出来,即便像饼图直接在series数组对象中配置data 也显示不出来,查看官方实例后发现一个方法,即如上图方法,便可以直接从series数组对象中配置的name属性直接取值,比较方便...

html2canvas下载地址jsPDF下载地址可以vue中通过包引入,也可以html中通过js引入(例如点此处把代码复制到空的js文件中保存再引入到项目中即可)

项目中有需求,用户通过全选word中的图片和文字,然后直接粘贴到富文本编辑器中,可以正常显示,但是实际开发中发现word多图片粘上去的时候图片全部都是file本地路径,无法正常显示,于是考虑另一种思路,用户直接上传word,然后后台通过解析word,并且把word中的图片进行上传,最后返回给前端的就是纯标签形式,类似于下图前端收到数据回传后,直接渲染到富文本内就可以了以iceEditor为例//iceEditor此处为自定义组件iceEditor.plugin({ ...

项目中有一个根据输入公式的需求,当用户输入, . { [ ( 这些特殊符号后,会返回一个数组,用于提示用户快捷输入,但是公式可能太长,返回值就只能带提示的那一部分,而并非全部,例如:公式为 :${Global.Plan.Units(//).Count}>0当用户输入 ${Global. 时返回一个数组 [{tip:'Plan'}],假设用户直接选中那么v-model中绑定的值就会变成Plan了,需求当用户选钟plan时,是在${Global.的基础上进行追...

如图,项目中需要一个在线批阅的功能,批阅者可以在线给word文档进行批注和打勾打叉等功能,后来又追加移动批注和批注换行的功能,想法就是用户通过\n或者按钮等操作对文本进行一个切割,例如 图片中 的文本嘻嘻嘻\n哈哈哈\n啦啦啦\n么么么\n哒哒哒然后对文本用split("\n")方法进行切割,变成数组['嘻嘻嘻','哈哈哈','啦啦啦','么么么','哒哒哒']//x 和 y 是做鼠标移动时回传出来的let arr =['嘻嘻嘻','哈哈哈','啦啦啦','么么么','哒哒...

如图,可以根据elementui组件自定义多选题,自动增加ABCD等选项,删除时从答案中移除

今天通过js引入插件时,发现一个很奇怪的bug,例如 此处.我直接通过相对路径引入相关js然后发现部署在根目录的网页可以正常显示该插件但是如果部署在非根目录就显示不出来同时会报错Uncaught SyntaxError: Unexpected token '<' 和相关js的方法defined处理后发现原因就在引入的地方,因为是相对路径引入,所以如果部署在非根目录下,那么js在根目录下就找不到.所以就会报上面的错误,处理方法为通过动态引入,然后就可以正常显示的...

账号密码,进行md5加密

需求:点击每一级会得到一个id,希望通过id去查到对应的名字getTreeName(list, id) { for (let i = 0; i < list.length; i++) { const a = list[i] if (a.id === id) { return a.label } else { if (a.children && a.children.lengt...

将Laya项目打包发布后,生成的文件,放到vue项目的public文件夹下直接调用就可以正常显示了

需求:项目中需要做一个粗糙的评论板块,用户评论时需要显示头像,但是不需要去更换改头像思路:用户昵称首字母作为头像,并且根据用户首字母生成固定的颜色,否则每次颜色都会随机例如:1.安装头像插件npm install vue-avatar2.引用//template部分<Avatar :username="name" :src="name" :background-color="extractColorByName(name)" color="#fff" style="vertical-

项目需求通过专家入口进行便捷登录,但是通常情况下,一个按钮只能对应一个账号,而且后台限制一个账号只能在一处登录,多处登录时,会提示"用户已登录",即第二次登录会失败.之前的处理是,当登录异常后,直接抛出异常,即图中注释的位置对应现在的处理是,在外部定一个变量,每次请求登录时,如果成功就正常登录,如果失败,就重复调用登录接口,并从定义的数组中取出对应位置的账号和密码,重复调用登录,直到成功,并判断,如果所有账号都不能用,就抛出异常,并重置数组...

此处的两个图标实际上是下图的框选区域主要是修改echarts中legend属性echarts配置项手册✍下面是部分代码//引入图片import imgSrc1 from "@/assets/imgs/hbgy/echarts-icon1.png";import imgSrc2 from "@/assets/imgs/hbgy/charts-icon2.png";//methods中定义方法initEchart() { let dom = this.$refs.shareEc.

项目中同一页面中同时存在两个视频,播放A视频时,又播放B视频,声音会叠加,因此,需要在播放一视频时,将另一视频停掉.此处视频路径是分开存储,因此 在播放对应视频时传入对应的参数,调用该方法时使用v-if判断一下即可当视频地址是放在数组中存储时,html样式<div> <div v-for="(item, index) in dataList" :key="index"> <div class="video"> .

下面是echats4.x版本的引入1.package.json中加上下面代码,然后cnpm i 更新加入的echats4.x的包"echarts": "^4.2.1",2.main.js中加入下面代码,并挂载到vue上Vue.prototype.$echarts = echarts3.写一个div,固定宽高,methods中添加方法,在create或者mounted中调用4.参照下面代码使用,setOption中复制官网实例就行了...

<div class="notices"> <el-card class="notices-item" shadow="never" v-for="notice in list" :key="notice.id"> <h4 class="notice-title" v-text="notice.n...

最某项目需要做一个申报的页面,需要预览本地的pdf和视频使用require引入静态文件时,发现视频和图片等的引入都没问题,但是引入pdf就开始报错.不能使用 require(’@/assets/pdf/xxx.pdf’)于是将pdf文件放在了public的文件夹下,直接使用/introduce.pdf,可以正常显示,但是部署中用到了nginx转发,如果使用这种绝对路径会显示成当前的网页,从而不能正常显示pdf,于是想到了直接用部署的地址+文件名,也可以正常显示<template v-if="

静态项目用到echarts图,需要动态获取当前的月份以及之前的月份,然后插入至echarts中var dataArr = [];var data = new Date();var year = data.getFullYear();data.setMonth(data.getMonth()+1, 1)//获取到当前月份,设置月份for (var i = 0; i < 12; i++) { data.setMonth(data.getMonth() - 1);//每次循环一次 月份值减1

项目中有个需求,点某个按钮后,设备开始自检,需要2秒刷新一下,整个自检需要30秒于是使用 定时器 定时2秒请求接口查看设备状态,然后使用 延时器 延时30秒后去清除这个 定时器.data(){ return { timing:null, delayTimer :null }},methods:{ //调用getStart()时设置定时器,同时设置延时器,时间到就清除定时器 getStart() { this.getTiming() this.delayTimer

问题描述,当我点击首页和关于我们时,这个蓝色下划线的选中状态是正确显示,但是当我通过点击logo跳转时,地址发生改变了,但是选中状态还是在关于我们那,当时是直接使用的elementui中的实例通过修改将当前路由作为选中状态的判定就可以了...

项目一直是只支持谷歌浏览器的,后来做申报时,一直说360急速浏览器和360浏览器登录不了,(360和360急速都是双核的,有兼容(IE)和急速(谷歌)模式),然后调试时发现按F12出现的是这种调试器这个是ie模式的控制台,然后我们需要切换成谷歌模式的在这里插入图片描述...

如图,第二个Tab标签页,是从第一个Tab标签页跳转的,但是可以看到网站的ico不同,使用方式://methods中添加这样一个方法,如果要添加固定的ico就直接在created中调用,如果是接口动态获取,就在拿到数据之后调用这个方法就行了.IcoCreate(icoUrl){ var link= document.querySelector("link[rel*='icon']") || document.createElement('link'); link.type = 'image/.

项目中有用到上传图片,上传后返回路径如下图所示,并没有返回https://xxx类似这种,而是返回一种相对路径,这时候一般在main的js中定义一个全局过滤器,如下图而使用起来也很方便 以avue组件库举例<avue-avatar shape="square" :alt="row.imgUrl" :size="64" :src="row.imgUrl | filterUrl>L</avue-avatar >直接在src后面加| filterUrl就行了但是如果是需

先说一下场景,账号长时间登录或者放久了,新开页面是会自动报错,用户信息全部清除,但是原页面不刷新可以正常调用接口,如果刷新会报错并且自动退出登录,而且这个bug属于偶然性出现,并不是百分百出现,就为调试增加了难度,今天无意之间看到一个帖子写到cookies在新开tab标签页时获取不到,而且而且过期后如果不刷新页面,cookies的状态就还会保存,读完之后发现很可能是过期的原因,于是仔细找了一下代码,发现之前确实有设置2小时后过期,难怪每次都是放长时间后才会出现这种问题,当然也不排除其他原因,先这么解决吧,以

如图,此处列举热门排行前50名<el-carousel indicator-position="none" :autoplay="false"> <el-carousel-item v-for="k in Math.ceil(contentList.length / 5)" :key="k"> <ul> <li v-for="item in contentList.slice((k - 1) * 5, k * 5)" :.

之前用的是pdfjs-dist 2.0.943 版本,但是没想到后面几次版本更新,原来的使用方法发生改变,而那个页面不是我写的,是之前一个同事写的但是他离职了,比较复杂,不好维护,琢磨了几天,一直报下面的两行错误.promiseUncaught SyntaxError: Unexpected token <然后把包删了重下也有问题.一直不是我要的版本,这里明明写的是2.0.943版本结果总下成2.4.456版本,非常让人苦恼,后来解决方法是"pdfjs-dist": "2.0.943"

在登录或者找回密码的过程中,经常会遇到防止机器人大量注册而使用验证码功能,在本项目中是由前端完成验证码功能.将这个封装为了一个组件,按需引用就可以了.<template> <div class="ValidCode disabled-select" title="点击切换" :style="`width:${width}; height:${height}`" @click="refreshCode"> <span v-for="(item, index) i

Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’项目中有个需求,将当前页面的部分内容做成pdf导出,于是使用了JsPDF和html2Canvas,然而发现导出的时候报了一行错误查阅发现是跨域的问题,但其实是自己在本地测试的原因然后访问外网服务器,发现可以正常导出,太坑了,日常踩坑...

之前项目没上线时,一直都是一个分支,后来项目上线了,主分支需要维护,于是开发新功能时,都是新建一个分支,然后在新分支上开发功能,但是当代码合并时就是噩梦啊.后来另一个前端小姐姐教我使用了vscode自带的代码合并功能,觉得非常好用,于是记录一下自己的使用步骤.首先切换到自己需要合并的分支,比如B(主)分支要合并A(开发)分支的代码,则先切换到B(主)分支,如上图所示.然后根据上图所示,找到自己开发分支的提交记录,从创建这个开发分支的那天开始合并这样就开始合并了,如果没冲突就自动缓存了,如果有冲

此处的场景是,项目中需要引入一个插件,而这个插件中使用了vue2-editor,所以不太好直接在项目中控制vue2-editor,而是选择修改这个插件的源码,在插件源码处,将vue2-editor封装成组件并配置axios环境,做图片上传,所以此处的token和baseurl都是由项目==>插件==>vue2-editorvue2-editor默认上传图片时是将图片转base64保存的,如果需要上传到服务器,则需要<vue-editor ref="editor"

项目中需要将doc文件等渲染成pdf在前端展示给用户,但是doc文件如果太大,渲染需要时间,这时候就需要加入一个加载动画,1.vue项目中创建一个loading.vue的组件2.去jquery插件库选择自己想要的css3动画,下载好后,将压缩包内的html和css部分粘贴到loading.vue中例如使用:<loading v-if="isLoading"></loading> //在需要的地方使用import Loading from '@/component

项目中需要做一个回显功能,因为是使用的插件,插件需要调用一个this.$refs.xxxxx(节点名称).setJSON()的方法才能成功回显,然后在watch中监听数据变化时就调用这个方法,结果发现watch中无法获取到dom节点(报错undefine),因为此时节点还没渲染好.后来找到一个方法可以解决这个问题watch:{ 'jsonList' :{ handler: function (newVal) { if (newVal

项目中需要做两个查询,分别是一天内24小时的记录和一周7天内的记录,例如今天日期2020-04-24,按天查则需要传{start:‘2020-04-24 00:00:00’,end:2020-04-25 00:00:00},按周查则需要传{start:‘2020-04-17 00:00:00’,end:2020-04-24 00:00:00}因此写了一个方法能轻松的获取这格式化的时间fam...

项目需要限制可选的时间在过去的30天内,比如今天4月23日,那么时间选择器的范围就是3.25-4.23日之间,其他时间需要禁用 <el-date-picker size="small" v-model="logDayVal" :picker-options="pickerOptions" type="daterange" value-format="yyyy-MM-dd" sta...