![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
珞珈山小鲁班
前端小渣渣,每天都想有点进步的小鲁班
展开
-
vue2.x+vantUI搭建移动端并适配750设计稿
文章目录前言一、学习目标二、创建vue项目1.文件夹下创建新的项目2.读入数据总结前言本文在已安装node、npm、vue-cli等前提下进行,请确保自己的node -v,npm -v和vue -V是正常显示版本的以下是环境和命令:node环境(自带npm)npm install webpack -gnpm install --global vue-cli一、学习目标搭建vue移动端项目框架vantUI按需引入开发设配750设计稿二、创建vue项目1.文件夹下创建新的项目vue原创 2022-04-29 15:59:05 · 775 阅读 · 0 评论 -
TypeError:this.getOptions is not a function
问题描述:用Vue3实现todolist时,提示需要安装less-loader,安装完之后报错如下:![在这里插入图片描述](https://img-blog.csdnimg.cn/7b32bcaf81d04e5884c9521e87e877b4.png#pic_center)原因分析:是因为less-loader版本过高和webpack版本不一致导致的解决方案:npm install less-loader@6.0.0或者也可以升级webpack的版本,但是容易引发一系列其他问题,建议原创 2022-02-21 11:25:23 · 389 阅读 · 0 评论 -
ios返回只显示部分数据,轻触或滑动页面出现完整数据
问题场景:ios从详情页放回当前列表页后,只显示下半部分列表,上半部分不展示,需要用手稍微滑动下页面才能完全展示当前页面,见下图:原因分析:从当前页面顶部进入详情返回后未出现该问题;从当前页面滑到底部进入详情返回后必现该问题。1.尝试在离开路由前beforeRouterLeave,通过设置document.documentElement.scrollTop和document.body.scrollTop均为0,只第一次成功,估计有缓存,导致问题还是出现;2.上一步怕是有缓存,尝试在详情页返原创 2022-02-18 14:01:54 · 1490 阅读 · 0 评论 -
vue+elementUI实现el-tree默认选中第一层级的第一个节点
项目场景:查询成绩时,按照左侧年级和班级树来查询学生成绩默认选中第一层级下的第一个节点并给出选中样式问题描述:此图为el-tree官方文档给出的数据,数据为对应的id、label、children该项目数据为接口返回,并且返回的数据格式并不是像el-tree提供的那么规整,需要自己组装组装数据:规整数据,统一保持相同的名称,使用replace替换成label和idid为整个字段唯一的,不能把年级的id也进行替换,因为会重复如果不需要默认展开第一个层级下的第一个节点,id可不原创 2021-11-16 11:22:56 · 14527 阅读 · 2 评论 -
接口获取循环展示的数据,hover时展示不同的背景图片
项目场景:正常显示为最右侧模块 hover时显示为左侧模块,且每个模块hover时背景图均不相同方案分析:采用@mouseover和@mouseout来解决鼠标hover移入和移出问题移入时要设置个变量记录hover的是第几个,否则会出现hover一个全部背景图都展示的效果解决方案: <ul> <li v-for="(item,index) in appList" :key="index"原创 2021-08-18 17:32:44 · 292 阅读 · 0 评论 -
el-table选择框回显已经选中的数据
<el-table :data="tableData" border stripe style="width: 100%" ref="multipleTable" :row-key="getRowKeys" @selection-change="selectionCamera" > <el-table-column type="selection" :原创 2021-08-06 15:54:59 · 3405 阅读 · 0 评论 -
特殊符号回显问题--使用form data传参
项目场景:问题描述:提示:这里描述项目中遇到的问题:例如:数据传输过程中数据不时出现丢失的情况,偶尔会丢失一部分数据APP 中接收数据代码:@Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); } 原原创 2021-08-06 15:42:27 · 376 阅读 · 0 评论 -
修改滚动条样式
/*修改滚动条样式*/div::-webkit-scrollbar { width: 5px; height: 10px;}div::-webkit-scrollbar-track { background: rgb(239, 239, 239); border-radius: 2px;}div::-webkit-scrollbar-thumb { background: #bfbfbf; border-radius: 10px;}div::-webkit-scroll原创 2021-08-03 16:45:03 · 49 阅读 · 0 评论 -
vue使用json数据
文章目录前言一、写入json文件二、引入json文件1.引入文件2.使用数据总结前言为了项目演示紧急整理个大屏,项目还是我之前写过的,要求数据用静态数据,跟其他学校生产环境上的数据保持一致即可一、写入json文件示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、引入json文件1.引入文件代码如下(示例):import numpy as npimport pandas as pdimport matplotlib.pyplot as plt原创 2021-05-26 16:17:33 · 4086 阅读 · 0 评论 -
vue+elementUI table表格头部加提示
背景:table表头图标hover时显示提示语,如下图:实现:使用slot="header"和el-tooltip代码<el-table-column label="已录入" prop="entered" align="center"> <template slot="header" class="tool"> <span>已录入</span> <el-tooltip eff原创 2021-04-21 11:03:39 · 1581 阅读 · 0 评论 -
vue请求接口类型:json转form data
背景:vue项目,跟后台联调接口,入参正确,但接口返回为参数为空,后台以form data类型接受参数,我以json类型传参图片:解决方法:let params = new FormData(); params.append('newsId', this.newsId);以上,解决问题~~~...原创 2021-03-03 17:46:53 · 784 阅读 · 2 评论 -
vue表单提交 防抖
表单提交时防止多次点击操作场景:之前项目存在的一个bug,提交表单时,双击提交按钮,会调两次接口,第一次失败,第二次成功。防抖:策略是当事件被触发时,设定一个周期延迟执行动作,若期间又被触发,则重新设定周期,直到周期结束,执行动作。 这是debounce的基本思想,在后期又扩展了前缘debounce,即执行动作在前,然后设定周期,周期内有事件被触发,不执行动作,且周期重新设定。使用方法:src/utils/index.js中增加防抖方法/** * 防抖 */export const原创 2021-01-26 10:32:30 · 1290 阅读 · 0 评论 -
keepAlive使用
前言:keepAlive用于组件缓存,被keepalive包含的组件会缓存项目中碰到场景:一个tab列表,进入第二个tab内页详情之后返回,依然让tab停留在第二个tab上,即保存状态1.给需要缓存的组件加name2.在包含该组件(离该组件最近的一个父组件)上添加keepalive3.如果该组件包含很多个子组件,而只有一个自组件是需要被缓存时,可用include:include="keepAliveArr"keepAliveArr: ['personal-tabs'](刚刚需要被缓存的组件)原创 2020-09-16 09:42:57 · 275 阅读 · 0 评论 -
vue—在每个访问路径中添加项目名
前言:在开发一个微信公众号的项目,联调过程中后台为了要区别是前端还是后台,希望前端在访问路径中加上项目名,比如wx-intergration-front之前是:localhost:8080/#/login添加后:http://localhost:8080/wx-intergration-front/#/login1.index.html<meta base="wx-intergration-front"></meta>2.webpack.base.conf.js中搜索pu原创 2020-09-08 19:59:41 · 4162 阅读 · 0 评论 -
Echarts只切换数据导致错位,销毁图表并重新加载
目的:按钮切换图表渲染不同的数值,原因:只进行了数据切换,没有重新渲染图表,由于数据全部为0,导致x轴出现了位置错乱(多切换几次这页面正常了,但是其他年级的页面不正常了)销毁图形进行重新渲染以子组件引入的,给组件加上id,方便获取<div ref="charts" id="myChart"></div>在父组件中进行操纵,echarts在绘制图形的时候会给div添加属性_echarts_instance_,所以需要清除属性$("#myChart").remo原创 2020-08-21 10:42:10 · 1622 阅读 · 2 评论 -
vue-图片src路径不存在时,显示默认图片
<img :src="item.url? item.url: '' " alt :onerror="defaultImg" />这里一定要判断src,不然接口返回url为null时,后面的onerror不生效computed: { defaultImg () { return 'this.src="' + require('@/assets/img/default-img.png') + '"' } },...原创 2020-07-17 15:46:06 · 3030 阅读 · 6 评论 -
依赖问题--ERROR in Cannot find module ‘node-sass‘
之前一直使用cnpm install来安装依赖,但是这个项目感觉有问题,所以采用npm install来安装依赖首先出现了:vue-cli-serve的问题:‘vue-cli-service’ 不是内部或外部命令,也不是可运行的程序或批处理文件。解决方案:先是删除了之前的node_moudles,执行:npm install --global vue-cli再:npm install(我看有大佬是,删除node_moudles后再npm install就可以解决问题的,大家试一试吧)还原创 2020-07-16 21:02:40 · 148 阅读 · 0 评论 -
时间戳转年月日-基于vue
一般在src/utils里新建date.jsimport Vue from 'vue';// 时间戳转换为 YYYY-MM-DD HH:mm:ssVue.filter('formatDate', function(timeStamp, format) { if (timeStamp) { format = format || 'YYYY-MM-DD'; let week = [ '星期日', '星期一', '星期二',原创 2020-07-16 20:54:24 · 544 阅读 · 0 评论