Vue
Vue相关
菜卷_
这个作者很懒,什么都没留下…
展开
-
【vue】pc端自适应方案,echart字体自适应
pc端自适应,echart字体自适应原创 2022-07-06 21:20:23 · 1001 阅读 · 0 评论 -
【vue】高德地图及插件在vue中的基本使用
文章目录一、vue中使用高德地图二、使用高德插件一、vue中使用高德地图1,将这一段代码复制到vue项目public目录下的index.html文件中,然后把url中key后边的参数修改为你自己申请的key。 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=d4332e5adb8b584442266763d20b978c" >&l.原创 2021-12-08 15:48:38 · 2300 阅读 · 0 评论 -
【vue】前端调取多个后端服务器地址获取数据
项目场景:今天收到这么一个需求,需要我去请求不同的服务器来获取数据,在网上搜了相关的方法,感觉都太复杂,我用下边这个方案也可以解决,并且暂时还没遇到坑,如果遇到坑会及时更新。解决方案:其实思路很简单,通过请求拦截器来判断路由,根据不同的路由去请求不同的后台地址import axios from "axios";const server = axios.create({ baseURL: "http://192.168.3.128:8080",});server.interceptor原创 2021-12-17 08:51:35 · 2818 阅读 · 3 评论 -
【vue】通过百度地图实现鼠标绘制多边形打点功能
文章目录前言一、封装loadBaiDuDrawMap二、在页面中调用loadBaiDuDrawMap总结前言今天接到这么一个需求:打开地图后,地图上显示提前预设好的区域。实现方法:1,通过高德或百度地图的鼠标绘制功能可以实现2,先在地图上将区域选好并保存,显示时可以根据保存的区域来渲染。3,但百度地图的鼠标绘制功能更强大完善,使用起来也简单一些,所以最后决定使用百度地图将代码原封不动的复制到你的项目之后可实现的功能:1,保存选中多边形的经纬度,多个多边形以二位数组形式保存;2,清除上.原创 2021-12-09 16:02:53 · 2141 阅读 · 2 评论 -
【vue】vue中使用百度地图在页面加载完成或点击marker后获取距离
现在有这样两个需求:1,使用百度地图,在页面加载完成后渲染出两个点之间的距离。2,在点击marker后渲染出两个点之间的距离看到第一个需求的时候,首先第一反应想到的就是监听百度地图的加载完成事件,但实际操作之后发现自己想简单了。获取距离需要调用百度地图的服务API,但是地图加载完成事件只是监听百度地图的加载完成,所以这时候是监听不到异步获取的距离的。但问题总要解决啊,解决方法如下:this.addrList是后端返回的list;this.distList是保存获取到的所有距离的数组m原创 2022-01-05 13:04:16 · 2399 阅读 · 0 评论 -
【vue】keep-alive清除缓存最简单暴力的方法
项目场景:场景一:使用vue开发移动端,有ABC三个页面,点击A跳转到B,点B跳转到C;点C返回B,点B返回A。场景二:场景一实现之后,会出现这样一个问题:先从A跳转到B,B页面会被缓存下来,当再从D跳转到B时,B页面并不会更新。解决方案:场景一可能会出下这个问题:从A-B-C正常,但当从B返回A时,会报错,这是因为从B返回A时,传递的参数并不是从A到B的参数,所以需要将B组件或页面缓存起来,就可以解决这个问题,缓存可以用vue’中的keep-alive标签,使用方法如下:1,原创 2021-12-07 14:12:24 · 8037 阅读 · 1 评论 -
【vue】对比两个对象的差异并在页面标记
如上demo,当text的内容发生变化时,会将变化标记变红,代码如下:HTML页面,给元素动态绑定ref <div id="app" class="flex"> <div class="container flex"> <!-- 上一个版本内容 --> <div class="container-left flex"> <h3>上一个版本</h3> .原创 2021-09-24 13:24:12 · 2317 阅读 · 0 评论 -
【vue】动态组件、异步组件的理解及使用场景
文章目录一、动态组件的使用二、异步组件的使用总结一、动态组件的使用动态组件,顾名思义,可以让组件根据需求动态显示,一般用于需要根据数据动态渲染的场景或类似tab切换栏,即组件类型不确定。使用起来也特别简单,示例代码如下:<template> <div> <button @click="changeComponent">showComponents</button> <!-- 只需要给component标签动态绑定一个i.原创 2021-05-16 18:15:06 · 1229 阅读 · 0 评论 -
【vue】$nextTick、mixin的理解及使用
文章目录一,$nextTick二,mixin总结一,$nextTick<template> <div> <ul ref="ul"> <li v-for="(i, index) in list" :key="index">{{ i }}</li> </ul> <button @click="addItem">添加</button> </div><原创 2021-04-06 17:39:50 · 364 阅读 · 0 评论 -
【vue】vue中使用swiper插件,swiper-slide绑定的点击事件无效
在vue中使用swiper插件,当我循环swiper-slide并添加点击事件时,发现点击事件并没有生效,查阅官方文档后,解决方法如下:addrList是循环的列表,swiper.realIndex是当前swiperSlide的index,用当前slider的index去匹配循环的列表的slider,就可以拿到循环列表的当前项。export default { data() { return { addrList: [], swiperOptions: {原创 2022-01-03 13:11:40 · 3274 阅读 · 0 评论 -
【vue】用户登录及token验证登录状态
文章目录一、存储token二、处理路由1.修改router/index.js2.修改main.js三、设置axios拦截器总结提示:以下是本篇文章正文内容,下面案例可供参考一、存储token通过登录接口获取到token并保存methods: { async onSubmit() { try { const res = await login(this.data); if (res.data.code === 200) {原创 2021-12-14 12:12:25 · 1492 阅读 · 0 评论