- 博客(29)
- 收藏
- 关注

原创 Vue动态控制表格列的显示隐藏
效果如上图所示,点击table右上方的表格按钮,弹出菜单栏,进行勾选,从而达到表格对应列显示和隐藏1.HTML部分(ant design)<div class="right-btns"> <!-- 按钮 --> <a-button class="table" @click="handleTable"><a-icon type="table" /></a-button> <!-- 弹出框 --> <div c
2020-06-29 09:56:32
7445

原创 vue中axios get请求如何传递数组
问题示例代码axios.get(`/oss/get/batch`,{ params:{url}, headers:{ Authorization: `Bearer ${token}` },}).then(result=>{ resolve(result.data)}).catch(err=>{ reject(err)})按这种方式传参数时,会得到以下问题而实际需要的是/batch?url=xxx&&url=xxx解决方案axio
2020-06-02 11:01:58
4737
2

原创 Vue中,$forceUpdate()的使用
在Vue官方文档中指出,$forceUpdate具有强制刷新的作用。那在vue框架中,如果data中有一个变量:age,修改他,页面会自动更新。但如果data中的变量为数组或对象,我们直接去给某个对象或数组添加属性,页面是识别不到的<template> <p>{{userInfo.name}}</p> <button @click="updateName">修改userInfo</button></template>
2020-05-21 15:01:39
70001
11

原创 vue在新的标签页打开pdf文件
js部分首先从后台获取到指定文件的二进制流export function getProStream(downloadKey,style){ return new Promise((resolve,reject)=>{ axios.get(`/project/attach/stream`, { params:{downloadKey,style}, ...
2020-04-16 21:36:44
5705
原创 正则表达式 密码需至少包含数字、字母、符号中的2种
let reg=/((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]))(?!^.*[\u4E00-\u9FA5].*$)/let value=`123456@d`//密码if(!reg.test(value)) alert('密码需至少包含数字、字母、符号中的2种')
2021-07-16 16:43:58
4162
原创 Updates were rejected because the tip of your current branch is behind
可用如下解决办法git pull origin prodgit push origin prod这样代码就推送成功啦
2021-07-14 13:58:18
146
原创 TypeError: this.getOptions is not a function
今天将uniapp项目转为typescript中,安sass-loader模块之后报错,如下图原因:sass-loader版本过高解决办法:1.npm uninstall sass-loader2.npm install -D sass-loader@7.x
2021-03-26 10:29:16
223
原创 js 通过正则表达式筛选除中文、英文、数字、()、-以外的字符
let str=`测试字符13//==(()))`;if(str.match(/[^-|^(|^)|^\d|^\[a-zA-Z\]|^\[\u4e00-\u9fa5\]]/g){ alert("您输入的名称不合规,支持包含中文、英文、数字、()、-")}中文:[\u4e00-\u9fa5]英文:[a-zA-Z]数字:\d[^abc]匹配除了abc以外的字符...
2020-12-16 17:24:13
7684
转载 Vue中,点击全屏按钮,进入全屏
<button>全屏/取消全屏</button>data() { return { fullscreen: false }},methods: { handleFullScreen(){ let element = document.documentElement; if (this.fullscreen) { if (document.exitFullscreen) { document.exitFullscr
2020-09-08 16:41:43
2331
1
原创 Vue中点击复制文本功能
1.下载clipboard.jsnpm install clipboard --save2.引入插件//main.js中全局引入import clipboard from 'clipboard';Vue.prototype.clipboard = clipboard3.代码编写 <a @click="copy" :data-clipboard-text="record.wenjuanLink" id="express_info_right">复制链接</a> &l
2020-08-15 17:51:19
1976
1
原创 Vue移动端禁止输入框聚焦时放大页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">在项目根目录找到 index.html在head标签中添加如上代码即可。
2020-07-20 17:13:46
1247
原创 input file实现多次上传文件(不会覆盖上次上传的文件)
<input type="file" name="file" ref="file" class="file" accept=".pdf,.jpg,.png" multiple="multiple" @change="getFile">存在问题第一次选择了n个文件,第二次选择文件结束后,会覆盖掉第一次选择的文件解决方法getFile(e){ e.target.files && e.target.files.forEach((item,index)=>{
2020-06-24 13:48:26
3110
1
原创 Vue 导出echarts图片
<template> <div> <div ref="wordcloud" class="wordcloud"> </div> <button @click="download">下载</button> </div></template>download(){ let mycanvas=document.getElementsByTagName('canvas')[0]
2020-06-09 11:27:50
2910
2
原创 Vue项目使用echarts实现词云图
效果图安装依赖npm install echartsnpm install echarts-wordcloud创建组件<template> <div ref="wordcloud" class="wordcloud"> </div></template><script>import echarts from 'echarts'import "echarts-wordcloud/dist/echarts-wordc
2020-06-04 10:09:45
4140
7
原创 JS中every()和some()的区别
js中every和some都是对数组进行迭代操作的函数区别every() 开始循环,只要有任何一项返回false,将会跳出循环,不会继续向下迭代some() 开始循环,一直在找符合条件的值,一旦遇到有一项返回true,将会跳出循环,不会继续向下迭代var arr = [ 1, 2, 3, 4, 5, 6 ]; console.log( arr.some( function( item, index){ console.log( 'item=' + item + ',index='+in
2020-06-03 15:26:26
1429
原创 Vue,实现3D盒子旋转相册
效果图<template> <div class="content"> <div class="top"><img src="./imgs/1.jpg"></div> <div class="bottom"><img src="./imgs/2.jpg"></div> <div class="left"><img src="./imgs/3.jpg"><
2020-05-25 13:57:52
2620
原创 纯CSS实现 [导航栏3D旋转效果]
一个鼠标悬停后上下翻动的效果!<style> .content{ position:relative; } .content>div{ position:absolute; top:0; left:0; width:100px; height:50px; line-height: 50px; text-align: center; transition: .2s; transform-style:
2020-05-22 16:42:58
934
原创 vue中axios的拦截封装
在实际vue项目开发中,与后台数据交互,一般会使用axios库,而在使用的过程中,经常会遇到数据拦截,并且进行后续处理。安装npm install axios引入在main.js文件中进行以下操作import axios from 'axios'Vue.prototype.axios=axios拦截器的使用一般我会将拦截器文件放在src->util目录下import axios from 'axios'let instance=axios.create();// http
2020-05-19 11:36:54
571
原创 js多层for循环嵌套,终止外循环
在js中,多层for循环嵌套时,如果想在内层循环到达某个条件时,终止外层循环,可以这样做:a:for(let i=0;i<10;i++){ b:for(let j=0;j<10;j++){ console.log(i,j) if(i==5){ continue a; } if(i==6){ break a; } }}...
2020-05-18 16:19:51
3702
原创 vue项目中下载文件时Blob对象转为JSON对象
背景需要实现文件下载的功能,有如下两种情况:如果符合条件,返回文件流如果不符合条件,则后端返回JSON,附上失败的msg,前端需要将msg的内容展示给用户最开始,我只想到了成功的情况,在请求接口时,设置responseType: 'blob',返回Blob对象后进行处理下载可是完全忽略了失败的情况,导致接收不到返回的json对象解决方法getQuaDownload(this.applyId,this.id).then(result=>{ if(result.type=='a
2020-05-18 15:46:41
3072
2
原创 Vue中使用jQuery
1.npm安装npm install jquery2.在需要使用的页面引入import $ from 'jquery'jquery的触发事件一般都要放在mounted函数中进行操作
2020-05-12 11:16:00
209
原创 vue a标签下载excel文件
**后端根据查询条件生成excel文件返回前端,vue框架进行下载**html部分<div> <a-button type="primary" @click="handleDownload(index)">下载</a-button></div>js部分handleDownload(index){ let id=th...
2020-04-18 13:14:46
3972
原创 vue+axios上传文件到服务器
上传服务器到首先要借助到FormData来操作,废话不多说直接上代码<!--前端的代码--><input type="file" ref="file"/>//请求接口前需要传的参数let formData=new FormData();formData.append('allowDownload',allowDownload)formData.append('...
2020-04-03 22:30:52
2604
原创 git推送代码到远程仓库,拉取远程的代码到本地,创建新的分支,切换本地分支,合并分支
从远程仓库克隆代码到本地指定文件夹git clone git@github.com:xxx.gitgit@github.com:xxx.git 是你远程仓库的仓库地址在本地指定文件夹初始化仓库git init将指定文件添加到本地暂存区git add .通常使用git add .命令是将本地所有文件添加到暂存区域将暂存区里的改动给提交到本地的版本库git commit...
2020-03-25 22:25:11
891
原创 Vue中,渲染列表时,报错Avoid using non-primitive value as key, use string/number value instead.
前两天写项目,用到了v-for渲染列表,一刷新页面,报错如下:仔细一看代码,原来时自己粗心大意,key值重复了key值必须是唯一的,如果重复就会报错。...
2020-03-09 11:08:40
486
原创 解决Vue中对象属性改变,视图不更新问题
vue项目中,正常情况下,当data中的数据发生改变时,视图也会随着更新。但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢?有两种解决方案:方案一:利用this.$set(this.obj,key,val)this.$set(this.taskDetail,'code',result.order.code)方案二:利用Vue.set(object,key,...
2020-03-09 10:55:36
1403
原创 axios不同请求的传参方式
今天在上班过程中,遇到了axios不同请求头的传参方式,比较挠头,上网查询,总结了一些,大家可以参考!!!params方式this.axios.get(`/page`,{ params:{ oid:123, name:'test' }});请求地址:/page?oid=123&name=‘test’请求体:无data方式(1)application/x-www...
2020-03-02 21:39:25
597
原创 vue中,$router和$route的区别
今天和朋友聊天,聊起$router和$route的区别,记录一下。1.$router是VueRouter的实例方法,可以认为是全局的路由对象,包含了所有路由的对象和属性。2.$route是一个跳转的路由对象,可以认为是当前组件的路由管理,指当前激活的路由对象,包含当前url解析得到的数据,可以从对象里获取一些数据。如name,path等。如有问题,请各位大佬指导。...
2020-02-19 20:53:16
4168
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人