分类：Vue

2020
10-10

vue+高德地图实现地图搜索及点击定位操作

vue+高德地图实现地图搜索及点击定位操作 首先需要在index.html中引入高德地图的js链接，key需要换成你自己的key最近有个需求是实现一个使用地图搜索定位的功能，在网上参考了下其他的文章，感觉不是很完善，自己整理了一下，可以实现点击定位，搜索列表定位等功能，可能有些地方是多余的，需要的自己看着改下<scripttype="text/javascript"src="https://webapi.amap.com/maps?v=1.4.14&key=你的key"></script>效果图如下下边就是实现过程html部分<template><divi... 继续阅读 >
2020
10-10

vue 项目软键盘回车触发搜索事件

vue 项目软键盘回车触发搜索事件 目的：掉起来右下角为搜索的按钮步骤：1、input的type改为search，再写keydown按下时的事件调取搜索事件的方法这样安卓手机上回车就变成了“搜索”，不过ios仍然是换行2、input外面套form，必须要有action，action=“javascript:returntrue”我的项目用van：想弹出数字键盘，并监听搜索（换行），在安卓上执行搜索按钮，在ios执行blur，因为安卓上点完成不执行blur<form@submit.prevent="formSubmit"action="javascript:retur... 继续阅读 >
2020
10-10

vue监听浏览器原生返回按钮,进行路由转跳操作

今天测试给我报了个bug说点击浏览器返回页数据显示的不对，我查了半天原因：需要监听浏览器的回退按钮，并阻止其默认事件。具体操作方法如下：1、挂载完成后，判断浏览器是否支持popstatemounted(){if(window.history&&window.history.pushState){history.pushState(null,null,document.URL);window.addEventListener('popstate',this.cancel,false);}},2、页面销毁时，取消监听。否则其他vue路由页面也会被监听... 继续阅读 >
2020
10-10

vue 手机物理监听键+退出提示代码

我就废话不多说了，大家还是直接看代码吧~<script>//Toast这些都是在网上粘的别人的。但是找不到出处了，大佬见谅。functionToast(msg,duration){duration=isNaN(duration)?3000:duration;varm=document.createElement('div');m.innerHTML=msg;m.style.cssText="width:60%;min-width:150px;opacity:0.7;height:30px;color:rgb(255,255,255);line-height:30px;text-align:center;border-radius:5px... 继续阅读 >
2020
10-10

关于vue的列表图片选中打钩操作

首先css,美化checkbox样式,这一段代码拿过去可以直接用label{font-size:25px;cursor:pointer;position:absolute;top:-10px;right:0px;z-index:150;}labeli{font-size:15px;font-style:normal;display:inline-block;width:18px;border-radius:15px;height:18px;text-align:center;line-height:18px;color:#fff;vertical-align:middle;margin:-2px2px1px0px;border:#53c7f01pxsolid;}... 继续阅读 >
2020
10-10

Vue路由 重定向和别名的区别说明

重定向重定向也是通过routes配置来完成，下面例子是从/a重定向到/b：constrouter=newVueRouter({routes:[{path:'/a',redirect:'/b'}]})重定向的目标也可以是一个命名的路由：constrouter=newVueRouter({routes:[{path:'/a',redirect:'/b'}]})甚至是一个方法，动态返回重定向目标：constrouter=newVueRouter({routes:[{path:'/a',redirect:to=>{//方法接收目标路由作为参数//ret... 继续阅读 >
2020
10-10

Vue项目配置跨域访问和代理proxy设置方式

在vue单页应用项目开发时，避免不了要请求后端，这时通常就会出现跨域问题。有2种常用的解决方案后端设置允许跨域访问前端通过代理进行访问后端下面我们只说说如何配置vue-cli代理访问：vue-cli代理最简单就是配置vueconifg进行实现下面配置3个请求的后端，分别是：请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/*请求http://localhost:4201/portalapi/*会代理请求http://localhost:8185/*请求http://loc... 继续阅读 >
2020
10-10

vue 使用原生组件上传图片的实例

需求描述：需要将后台返回的图片路径赋值到img的src1一个页面上传一张图片当一个页面只有一个位置需要上传图片，很简单，直接绑定上传按钮html页面<divclass="col-md-4"><inputclass="hidden"accept="image/png,image/jpg"type="file"id="tempUploadFile"v-on:change="uploadPic($event)"/><inputclass="hidden"v-model="mapItem.MapIcon"/><imgclass="imgbgbox"v-bind:src="mapItem.MapIcon"/></div>js代... 继续阅读 >
2020
10-10

vue配置多代理服务接口地址操作

vue配置多代理服务接口地址操作 一、介绍随着微服务架构的流行，后台项目逐渐被拆分成不同的模块进行通信，但是前端还是只有一个项目所以在访问不同模块后台时，需要请求不同的地址，在vue项目中，通过配置代理可以进行后端服务器接口地址访问，当需要访问不同微服务的后端接口时就需要配置不同的地址。二、代码config/index.js文件中配置代理地址：自己项目中定义所有接口api管理文件src/api/getData.js：页面调用接口时xxx.vue三、总结1、vue使用配置多代理地址... 继续阅读 >
2020
10-10

vue全局使用axios的操作

在vue项目开发中，我们使用axios进行ajax请求，很多人一开始使用axios的方式，会当成vue-resoure的使用方式来用，即在主入口文件引入importVueResourcefrom'vue-resource'之后，直接使用Vue.use(VueResource)之后即可将该插件全局引用了，所以axios这样使用的时候就报错了，很懵逼。仔细看看文档，就知道axios是一个基于promise的HTTP库，axios并没有install方法，所以是不能使用vue.use()方法的。☞查看vue插件那么... 继续阅读 >
2020
10-10

Vue自定义多选组件使用详解

Vue自定义多选组件使用详解 本文实例为大家分享了Vue自定义多选组件使用的具体代码，供大家参考，具体内容如下子组件（选项卡）checkBoxCard.vue<template><divclass="checkBoxCard"><div:class="`box${check&&'boxCheck'}`"@click="checked(),updateData()">{{name}}</div></div></template><script>exportdefault{name:"checkBoxCard",props:{name:String,checkIndex:{type:Number,default:null,},},data(){r... 继续阅读 >
2020
10-10

vue项目中微信登录的实现操作

1、下载组件wxloginnpminstallvue-wxlogin--save2、引入组件，给组件传参3、重定向的url应该是微信登录官网中的微信授权作用域4、如果url里面有端口号，微信授权作用里面也要有5、重定向的url：需要在http://tool.chinaz.com/tools/urlencode.aspx中转码6、微信登录成功后，会自动重定向到新地址，此时的地址栏中就有code参数7、如果报错说不能从组件跳到页面，那就找到wxlogin组件里面的iframe标签，加上这个属性：sandbox=“... 继续阅读 >
2020
10-10

vue axios请求成功却进入catch的原因分析

问题：axios返回200状态码（即请求成功）却走进了catch里面原因：1.当axios请求完成后走的时then的代码块，如果then代码块中存在错误代码信息，这时就会进入catch中抛出异常（注意：此时控制台并不会报错，因为错误被catch捕获了）2.axios是异步发起，若发起后页面刷新，那么就会丢失当前进程，导致接收不到。例如form表单，点击按钮提交后，表单会刷新补充知识：axios用catch的写法与不使用catch有什么区别？官网上的写法：axios... 继续阅读 >
2020
10-10

vue中后端做Excel导出功能返回数据流前端的处理操作

vue中后端做Excel导出功能返回数据流前端的处理操作 项目中有一个导出功能的实现，用博客来记录一下。因为需求对导出表格的数据格式和样式有要求，所以这个导出功能放到后端来做，而且后端返回的是数据流，所以需要处理成想要的表格并导出来。先看下效果图：页面效果：点击导出Excel调用导出接口成功了：后台返回的数据流，一堆看不懂的乱码：接下来要处理这堆乱码，因为用到的地方多，所以在util.js文件里封装了一个公共方法并抛出：虽然vue里有封装好的请求接口的方法，但这里要... 继续阅读 >
2020
10-10

vue等两个接口都返回结果再执行下一步的实例

next只能?用一次，??可以用Promise.all解?Q，等待????步操作都返回?果後再next:beforeRouteEnter(to,from,next){//Promise.all??鹊?到M?鹊Promise都resolve後才??^?跑(then)Promise.all([main._base({methodName:'QueryProductInfo',productId:to.params.id}),main._base({methodName:'QueryProductReview',type:'0',index:'0',count:'2',productId:to.params.id})]).then(... 继续阅读 >