分类：Vue

2020
10-08

解决vue+router路由跳转不起作用的一项原因

如下所示：Vue.use(Router)exportdefaultnewRouter({mode:'history',routes:[{path:'/',component:Login},{path:'/login',component:Login},{path:'/register',component:Register},{path:'/*',component:NotFound},]})记得要写上mode:'history',原因如下补充知识：vue-router配置后地址栏输入跳转不成功问题在起服务的js中增加connect-history-api-fallbackconsthistory=require('conn... 继续阅读 >

2020
10-08

解决vue项目router切换太慢问题

问题定位：随着项目增大，有一天突然发现页面切换时候，要等1-2s页面才切换过去，然后就开始定位问题，刚开始以为时页面组件太多导致的，通过删除组件，发现没啥改善，然后就在两个页面打印日志，第二页面created周期时间和路由切换时间相差不大，可以排除是页面渲染耗时。然后在第一个页面的destroyed周期里面打印日志，发现destroyed->router切换耗时1.5s左右，这时候定位问题是vue的destroyed周期耗时。destroyed周期耗时：这时... 继续阅读 >

2020
10-08

vue2.* element tabs tab-pane 动态加载组件操作

一、重要部分1、注意<component:is=item.content></component>：表明模板<el-tab-panev-for="(item)ineditableTabs":key="item.name":label="item.title":name="item.name"><component:is=item.content></component></el-tab-pane>2、content:'Jbxx'，其中jbxx是模板addTab(targetName,route){letnewTabName=++this.tabIndex+''this.editableTabs.push({title:tar... 继续阅读 >

2020
10-08

解决vue中el-tab-pane切换的问题

今天在编写vue的时候用到了el-tabs，然后遇到切换的时候，在次打开el-dialog还是上次的状态（因为两次打开的el-tab-pane数量不一样，就出现了问题）如下：第一次打开时的状态，打开到第二次的时候解决方法给el-tab-pane命名<el-tabstype="border-card"v-model="activeName"></el-tabs>在script中data(){return{isShow:'',activeName:'second'}},在每次关闭弹框的时候，在关闭方法中重置activeNameactiveName='seco... 继续阅读 >

2020
10-08

vue实现的多页面项目如何优化打包的步骤详解

遇到的问题在多页面框架打包的过程中会，随着业务的增加页面越来越多，使用的三方包也会越来越多，但并不是所有页面都会使用到三方插件，使用webpack打包会让所有的三方包打包到一起，会导致vendor.js(三方包打包后的文件)越来越大，即使没使用过三方插件的页面也会引入，页面加载会越来越慢.如何优化 使用cdn引入，这种就每次新建一个页面的时候手动通过cdn的方式引入，但是并不是特别好的方式，还需要手动加入.就是使用... 继续阅读 >

2020
10-08

vue tab切换,解决echartst图表宽度只有100px的问题

解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路1.将图表放进一个div里面<divclass="echarts"><divid="myChart":style="{width:'100%',height:'150px'}"></div></div>2.定义一个方法，并在mounted视图更新的时候执行<script>exportdefault{mounted(){this.setMyChart();},methods:{setMyChart(){//jq写法//获取父元素varecharts=$('.echarts');//获取父元素宽高varechartsWidth... 继续阅读 >

2020
10-08

vue中echarts图表大小适应窗口大小且不需要刷新案例

我就废话不多说了，大家还是直接看代码吧~内容如下：//基于准备好的dom，初始化echarts实例letmyChart=this.$echarts.init(document.getElementById('myChart'))//根据窗口的大小变动图表---重点window.onresize=function(){myChart.resize();//myChart1.resize();//若有多个图表变动，可多写}代码如下：mounted(){constthat=thiswindow.onresize=()=>{//根据窗口大小调整曲线大小letmyChart=... 继续阅读 >

2020
10-08

完美解决vue 中多个echarts图表自适应的问题

看代码吧~<divclass="echarts"><IEcharts:option="bar"ref="echarts"></IEcharts></div>mounted(){this.selfAdaption()},methods:{//echarts自适应selfAdaption(){constself=this；setTimeout(()=>{window.onresize=function(){self.$refs.echarts.resize()}},10)}}上面这段代码在出现多个echarts图表时只有一个图表自适应，修改了一下<divclass="echarts"... 继续阅读 >

2020
10-08

vue实现多个echarts根据屏幕大小变化而变化实例

前言有如下页面需求：在一个页面展示多个echarts图表，并且根据屏幕大小变化而变化。实例可以封装成组件使用，以增加代码复用性//myCharts.vue<template><divclass="charts-comps"ref="charts"></div></template><script>importechartsfrom'echarts'exportdefault{name:'myCharts',props:{type:{type:String,default:''}},data(){return{resizeTimer:null,myChart:null}},methods:{init... 继续阅读 >

2020
10-08

解决vue一个页面中复用同一个echarts组件的问题

因为页面中要用echarts图表的地方比较多，所以封装了组件，方便复用，如图：我需要这样一个饼图，并且接下来在很多次地方要用到。直接复制官网的代码，再改改数据，需要用的时候直接拿来用。但是接下来出现了一个问题：如果我在同一个页面多次使用这个组件，图表将不能正常显示。分析了一下，echarts通过id获取对象//基于准备好的dom，初始化echarts实例varmyChart=echarts.init(document.getElementById('main'));当封装为组... 继续阅读 >

2020
10-08

浅谈vue单页面中有多个echarts图表时的公用代码写法

html中：<divclass="charts1"/><divclass="charts2"/><divclass="charts3"/><divclass="charts4"/><divclass="charts5"/><divclass="charts6"/><divclass="charts7"/>数据处理就不用提了。嗯，直接画图：//画折线图drawLine(){//数据处理的方法this.dealEchartsData()varmyChartsArr=[]for(vari=1;i<=7;i++){this.myCharts=this.$echarts.init(document.getElementsByClassName(... 继续阅读 >

2020
10-08

echarts.js 动态生成多个图表 使用vue封装组件操作

组件只做了简单的传值处理，记录开发思路及echarts简单使用。这里默认所有图表样式一致，都为柱状图，如需其他类型，可查阅echarts官网文档，再动态传值即可。vue使用组件------在外层用v-for循环，传不同值进charts即可<!--传入对应的数据给子组件--><charts:options="item.select":id='"charts"+index':index="index"style="width:900px;height:400px;"></charts><!--传入对应的数据给子... 继续阅读 >

2020
10-08

理解Proxy及使用Proxy实现vue数据双向绑定操作

1.什么是Proxy？它的作用是？据阮一峰文章介绍：Proxy可以理解成，在目标对象之前架设一层"拦截"，当外界对该对象访问的时候，都必须经过这层拦截，而Proxy就充当了这种机制，类似于代理的含义，它可以对外界访问对象之前进行过滤和改写该对象。如果对vue2.xx了解或看过源码的人都知道，vue2.xx中使用Object.defineProperty()方法对该对象通过递归+遍历的方式来实现对数据的监控的，具体了解Object.defineProperty可以看我上一... 继续阅读 >

2020
10-08

Vue项目前后端联调(使用proxyTable实现跨域方式)

vue本地项目调试线上接口出现跨域问题使用方法：vue在配置文件中提供了proxyTable来设置跨域，在config文件夹的index.js文件中dev:{//开发环境下//静态资源文件夹assetsSubDirectory:'static',//发布路径assetsPublicPath:'/',//代理配置表，在这里可以配置特定的请求代理到对应的API接口//例如将'localhost:8080/api/xxx'代理到'http://xxxxxxx.com/xxx'proxyTable:{'/api':{target:'http://xxxx... 继续阅读 >

2020
10-08

Vue移动端项目实现使用手机预览调试操作

最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。1.电脑和手机连接到同一个WIFIa.台式电脑和手机同时链接一个路由器，使用同一个wifi；b.笔记本也可以直接启用一个wifi，手机链接笔记本wifi也可以；2.查询本地IP地址WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，查看本地IPv4；3.修改本地项目中IP地址找到项目中config文件夹，下面index.js文件... 继续阅读 >

2020
10-08

vue中移动端调取本地的复制的文本方式

我就废话不多说了，大家还是直接看代码吧~_this.$vux.confirm.show({title:'复制分享链接',content:‘分享的内容',onConfirm(){//_this.$vux.toast.text('复制成功')leturl=‘分享的内容';letoInput=document.createElement('input');oInput.value=url;document.body.appendChild(oInput);oInput.select();//选择对象;document.execCommand("Copy")... 继续阅读 >