
vue
泽辰~
这个作者很懒,什么都没留下…
展开
-
keep-alive动态缓存(配合vuex)
需求:页面顺序,从A到B到C,对于B 页面,进入C页面时,需要缓存,进入A页面时,不需要缓存,A进入B的时候是要刷新的。所以,问题就是,如何让keep-alive 缓存动态进行?思路就是:动态改变keep-alive的include数组。首先创建A,B,C页面-----a.vue<template> <div> <div @click="handleGo">a页面</div> <input /> </d原创 2021-08-09 22:03:48 · 1026 阅读 · 0 评论 -
Vue实现短信按钮倒计时
业务场景:点击按钮,然后按钮禁止,出现倒计时直接上代码:---html<button :disabled="abledBut" @click="alipayWithdrawals"> 提现 <text v-if="abledBut">({{setTimeNum}}s)</text></button>---jsdata() { return { abledBut: false, //是否禁止 setTimeNum: 10,原创 2021-07-20 10:24:16 · 629 阅读 · 0 评论 -
vue实现单击选中再次单击取消
使用场景:当你写一个v-for循环出一个列表,在写一个点击事件,点击之后给一个class,列表某一个颜色突出,在点击取消颜色突出的场景1.选中赋值的变量不是数组时-------html<div :class="['recentOrderBut',recentOrdersArray == item.value ? 'recentOrderActive' : '', ]" v-for="item in recentOrdersDic" :key="item.value" @clic原创 2021-07-07 10:28:08 · 3640 阅读 · 0 评论 -
Vue.cli3使用axios向后台请求文件并下载到本地
一.需求最近公司需要一个身份证读卡功能的需求,不过用这个需求必须在本地电脑下载一个压缩包去安装这个软件1.正常来说我们就直接请求后台写的接口// 点击查看文档 async handleText() { let res = await this.$http.get('/qh/download.do') console.log(res) },这样写的话。会过来一些乱码样子的东西这并不是我们想要的东西,也不能自动下载什么东西2.然后我们现在给axios添加.原创 2020-08-05 10:54:07 · 976 阅读 · 0 评论 -
Vue.cli3使用axios中post向后台传数组包对象类型参数(qs篇)
1问题向后端传数组包对象类型的参数(下面图片为例子)解决我们改怎么解决呢?首先我们定义一个跟后台要接收的参数名一样的变量名然后对这个变量名qs处理一下// 点击提交 handleUpTo() { let ldinfo = this.ruleForm.ldinfo console.log(ldinfo) //这里是上面的那些值 let self = this Qs.stringify({ ldinfo: ldinfo }, { array.原创 2020-08-05 10:35:31 · 2881 阅读 · 0 评论 -
Vue.cli3使用axios的post给后台传数组参数(qs篇)
1.问题很多人在向后端请求要携带数组参数时,很多人是这样的这样传过去的话,100%会出问题2.解决我们可以这样处理,利用qs去转换一下,如果你安装了axios,就不要去安装qs了,axios里面包含了qs,你只要引入就OK了(import Qs from ‘qs’)比如我们要传过去这种的数组参数 let ldidList = [] for (var i = 0; i < this.tableNum.length; i++) { ldidList.push(this.tabl.原创 2020-08-05 10:14:25 · 5055 阅读 · 1 评论 -
vue.cli3使用elementUi的upload图片转base64后上传后台
使用elementUI图片上传的时候总会因为一个值而烦恼—action这个怎么说呢,其实里面可以给空值的,只是会报一个错,其实不怎么碍事,也可以放一个接口,只不过你要考虑一个跨域的问题,如果不放就让它空着吧1.使用elementUI的upload这里基本就可以这样写了,如果需求不同可以看看elementUi的文档添加几个需求<div class="upLiadImg"> <el-upload class="avatar-uploader" action=""原创 2020-08-03 21:07:26 · 1188 阅读 · 0 评论 -
vue.cli3解决跨跨域问题Access to XMLHttpRequest at ‘http://192.168.88.228/login/Login?phone=19939306484&pass
当浏览器控制台出现Access to XMLHttpRequest at ‘http://192.168.88.228/login/Login?phone=19939306484&password=111’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: The value of the 'Access-Contr说明是跨域问题一.说跨域,就要先说说‘同源策略’1、同源策略/SOP(Same origin原创 2020-07-27 20:55:30 · 91884 阅读 · 5 评论 -
vue.cli3设置单独路由页面全屏切换
不是全屏的时候是全屏的时候首先思想:获取当前路由页面的节点,对的节点操作定位,脱离文档流,top:0,;left:0;1.用ref获取当前路由页面最大的div,也就是template包的第一个div,也可以是其他的<template> <div ref="index"> //ref标识 <Title :refDome='refDome'></Title> </div></template>2.如果要原创 2020-07-23 16:13:23 · 1253 阅读 · 0 评论 -
Vue.cli3 PC端px自适应转换rem
1.安装第三方flexible库npm install lib-flexible2.在main.js里引入lib-flexible一定要引入,不然不行import 'lib-flexible3.配置meta标签,在index.html文件当中(看看是否有没有,有了就不要写了)<meta name="viewport" content="width=device-width, initial-scale=1.0">4.安装px2rem工具npm install px2rem-原创 2020-07-22 21:02:41 · 1484 阅读 · 0 评论