![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
爱吃的前端程序员
这个作者很懒,什么都没留下…
展开
-
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 · 181 阅读 · 0 评论 -
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 · 2250 阅读 · 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 · 1931 阅读 · 0 评论 -
Vue移动端禁止输入框聚焦时放大页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">在项目根目录找到 index.html在head标签中添加如上代码即可。原创 2020-07-20 17:13:46 · 1168 阅读 · 0 评论 -
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 · 7139 阅读 · 0 评论 -
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 · 2919 阅读 · 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 · 2843 阅读 · 2 评论 -
Vue左侧菜单栏切换,右侧内容随之改变
效果点击左侧菜单栏切换路由,右边内容跟着改变首页 Index.vue路由部分原创 2020-06-05 10:44:11 · 6882 阅读 · 1 评论 -
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 · 3998 阅读 · 7 评论 -
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 · 4637 阅读 · 2 评论 -
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 · 2469 阅读 · 0 评论 -
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 · 68458 阅读 · 11 评论 -
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 · 518 阅读 · 0 评论 -
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 · 2961 阅读 · 2 评论 -
Vue中使用jQuery
1.npm安装npm install jquery2.在需要使用的页面引入import $ from 'jquery'jquery的触发事件一般都要放在mounted函数中进行操作原创 2020-05-12 11:16:00 · 175 阅读 · 0 评论 -
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 · 3931 阅读 · 0 评论 -
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 · 5541 阅读 · 0 评论 -
vue+axios上传文件到服务器
上传服务器到首先要借助到FormData来操作,废话不多说直接上代码<!--前端的代码--><input type="file" ref="file"/>//请求接口前需要传的参数let formData=new FormData();formData.append('allowDownload',allowDownload)formData.append('...原创 2020-04-03 22:30:52 · 2551 阅读 · 0 评论 -
Vue中,渲染列表时,报错Avoid using non-primitive value as key, use string/number value instead.
前两天写项目,用到了v-for渲染列表,一刷新页面,报错如下:仔细一看代码,原来时自己粗心大意,key值重复了key值必须是唯一的,如果重复就会报错。...原创 2020-03-09 11:08:40 · 457 阅读 · 0 评论 -
解决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 · 1344 阅读 · 0 评论 -
vue中,$router和$route的区别
今天和朋友聊天,聊起$router和$route的区别,记录一下。1.$router是VueRouter的实例方法,可以认为是全局的路由对象,包含了所有路由的对象和属性。2.$route是一个跳转的路由对象,可以认为是当前组件的路由管理,指当前激活的路由对象,包含当前url解析得到的数据,可以从对象里获取一些数据。如name,path等。如有问题,请各位大佬指导。...原创 2020-02-19 20:53:16 · 4140 阅读 · 1 评论