- 博客(31)
- 收藏
- 关注
RSS订阅原创 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
895
原创 TypeError:this.getOptions is not a function
问题描述：用Vue3实现todolist时，提示需要安装less-loader，安装完之后报错如下：原因分析：是因为less-loader版本过高和webpack版本不一致导致的解决方案：npm install less-loader@6.0.0或者也可以升级webpack的版本，但是容易引发一系列其他问题，建议
2022-02-21 11:25:23
419
原创 ios返回只显示部分数据，轻触或滑动页面出现完整数据
问题场景：ios从详情页放回当前列表页后，只显示下半部分列表，上半部分不展示，需要用手稍微滑动下页面才能完全展示当前页面，见下图：原因分析：从当前页面顶部进入详情返回后未出现该问题；从当前页面滑到底部进入详情返回后必现该问题。1.尝试在离开路由前beforeRouterLeave，通过设置document.documentElement.scrollTop和document.body.scrollTop均为0，只第一次成功，估计有缓存，导致问题还是出现；2.上一步怕是有缓存，尝试在详情页返
2022-02-18 14:01:54
1563
原创 封装el-pagination（记录）
// 封装<template> <el-pagination class="pagination" background layout="total, prev, pager, next" :current-page.sync="curPage" :total="total" :page-size="pageSize" @current-change="setCurrentPage" ></el-paginati
2021-11-22 10:36:41
263
原创 el-table动态循环展示表头和数据
项目场景：展示学生考试的成绩，只有学号和姓名是固定的，后面的科目并不是固定的展示所有科目，是根据接口返回的有成绩的数据进行渲染的，具体见下图：问题描述：接口返回的数据结构如下：后面的科目要进行循环展示，可以选定list的第一项作为头部循环出表格的头部，分数再根据各自的row进行获取 代码如下：<el-table :data="tableData.tableList" style="width: 100%" class="main-table" stripe>
2021-11-22 10:23:48
5040
原创 vue+elementUI实现el-tree默认选中第一层级的第一个节点
项目场景：查询成绩时，按照左侧年级和班级树来查询学生成绩默认选中第一层级下的第一个节点并给出选中样式问题描述：此图为el-tree官方文档给出的数据，数据为对应的id、label、children该项目数据为接口返回，并且返回的数据格式并不是像el-tree提供的那么规整，需要自己组装组装数据：规整数据，统一保持相同的名称，使用replace替换成label和idid为整个字段唯一的，不能把年级的id也进行替换，因为会重复如果不需要默认展开第一个层级下的第一个节点，id可不
2021-11-16 11:22:56
14919
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
309
原创 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
3489
原创 特殊符号回显问题--使用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
418
原创 修改滚动条样式
/*修改滚动条样式*/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
57
原创 elementUI下拉点击两次才会被选中 & 曲面屏滑动直接滑出页面
项目场景：要求：使用同一个项目放在web端显示web内容和样式，放在H5显示H5内容和样式，一开始使用elementUI开发的，功能不复杂，因此不引入vant，使用elementUI问题描述：在写选择下拉选择框时，使用电脑浏览器代理没问题，安卓也没问题，ios会出现下拉选择点两次才会出现在选择框内 解决方案：修改css .el-scrollbar { > .el-scrollbar__bar { opacity: 1 !important; }}测试，完美，以
2021-07-14 19:00:57
827
原创 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
4134
原创 nodejs遍历文件、重命名并写入新的文件
项目场景：项目某功能类似发送表情包，下载UI给切的图全部都是中文命名，因此需要统一修改，但表情包太多，使用node.js写个脚本将所有emoji图片重命名并组成一个对象数组，方便页面调用node.js写脚本：emoji这个文件夹是放在public下的emoji.js是放在utils下的，所以找到需要遍历的文件夹首先遍历emoji文件夹，组成数组对象，对所有emoji图片进行重命名，之后将生成的数据写入list.js中const fs = require('fs')const pa
2021-05-26 16:09:00
485
2
原创 理解圣杯布局和双飞翼布局
圣杯布局和双飞翼布局目的：三栏布局，中间一栏最先加载和渲染（内容最重要） 两边定宽，中间内容宽度自适应 一般用于PC端圣杯布局和双飞翼布局的技术总结：使用float布局 两侧使用margin布局，以便和中间内容横向重叠 防止中间内容被两侧覆盖，圣杯布局用padding，双飞翼布局用margin圣杯布局实现（去除header和footer）准备1：容器包裹，三栏分别设置宽度和背景色（两边定宽，中间宽度设为100%）.center { width: 100%;
2021-05-18 10:55:40
208
原创 微信动态修改头部
背景：开发微信公众号项目，跳转不同模块需要展示不同的头部名称方法：使用vue-wechat-title插件实现：安装npm vue-wechat-title --save引入-在src下的index.js中引入import VueWechatTitle from 'vue-wechat-title';Vue.use(VueWechatTitle);路由中定义meta中的title在App.vue中使用<router-view v-wechat-title="
2021-05-17 09:59:46
151
原创 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
1633
原创 vue请求接口类型：json转form data
背景：vue项目，跟后台联调接口，入参正确，但接口返回为参数为空，后台以form data类型接受参数，我以json类型传参图片：解决方法：let params = new FormData(); params.append('newsId', this.newsId);以上，解决问题~~~...
2021-03-03 17:46:53
804
2
原创 下载文件（文件地址&文件流）
背景：项目中经常碰到下载文件的需求实现：1.第一种方法：window.open('接口返回的文件流')2.第二种方法：请求完接口后，.then里let a = document.createElement('a');a.download = item.fileName;// a.download = `${this.teacherName}_${this.titleName}_${date}.zip`;a.style.display = 'none';a.href = item.fi
2021-03-03 17:35:35
518
1
原创 css “＞“与“+“
CSS:">"为子元素选择器，可以选择父元素的某一个子元素，而不是所有的后代子元素；"+"为相邻兄弟选择器，两个元素有相同的父元素；需求：项目里经常会碰到类似列表样式的一行一行数据显示，且每行有一定间隔。案例：代码：<div class="detail"> <div class="item"> <p class="label">评价维度</p> <p class="info">
2021-03-01 10:11:25
210
原创 vue表单提交 防抖
表单提交时防止多次点击操作场景：之前项目存在的一个bug，提交表单时，双击提交按钮，会调两次接口，第一次失败，第二次成功。防抖：策略是当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。 这是debounce的基本思想，在后期又扩展了前缘debounce，即执行动作在前，然后设定周期，周期内有事件被触发，不执行动作，且周期重新设定。使用方法：src/utils/index.js中增加防抖方法/** * 防抖 */export const
2021-01-26 10:32:30
1347
原创 el-table实现表头内容换行显示+el-table行列变动问题
**前言：**使用:render-header="renderheader"在需要换行的地方使用 /使用:key="Math.random()"可解决顺序问题**场景：**要求实现table表头内容换行显示，修改了个bug，页面进来时，这两列顺序会变如下图：代码如下：template:<el-table :data="tableList.tableData" stripe style="width: 100%; font-size: 14
2020-12-17 14:42:34
3701
原创 keepAlive使用
前言：keepAlive用于组件缓存，被keepalive包含的组件会缓存项目中碰到场景：一个tab列表，进入第二个tab内页详情之后返回，依然让tab停留在第二个tab上，即保存状态1.给需要缓存的组件加name2.在包含该组件（离该组件最近的一个父组件）上添加keepalive3.如果该组件包含很多个子组件，而只有一个自组件是需要被缓存时，可用include:include="keepAliveArr"keepAliveArr: ['personal-tabs']（刚刚需要被缓存的组件）
2020-09-16 09:42:57
299
原创 vconsole-vue移动端调试工具&微信开发者工具
前言：在做微信公众号的项目，由于需要微信环境，只能在微信中打开，但是手机端不能看到调试页面的内容1 安装vsoncolenpm install vconsole2 引入（index.js或者main.js）import vConsole from 'vconsole'Vue.prototype.$vConsole= new vConsole()3 运行之后，报错发现缺少对应的.min.js，在index.html中引入<script src="https://cdn.bootcss.
2020-09-10 14:31:49
664
原创 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
4220
原创 移动端-适配（px转rem）
做了两个移动端项目，一个静态，一个vue静态：在html页面head标签里计算，一般设计图是750，width/7.5即在设计图上测量px单位的尺寸，然后除以100转换成rem单位后直接使用就可以了<script> var html = document.querySelector('html'); changeRem(); window.addEventListener('resize', changeRem); fu
2020-09-04 11:27:11
406
原创 Echarts只切换数据导致错位，销毁图表并重新加载
目的：按钮切换图表渲染不同的数值，原因：只进行了数据切换，没有重新渲染图表，由于数据全部为0，导致x轴出现了位置错乱（多切换几次这页面正常了，但是其他年级的页面不正常了）销毁图形进行重新渲染以子组件引入的，给组件加上id，方便获取<div ref="charts" id="myChart"></div>在父组件中进行操纵，echarts在绘制图形的时候会给div添加属性_echarts_instance_，所以需要清除属性$("#myChart").remo
2020-08-21 10:42:10
1670
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
3251
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
153
原创 时间戳转年月日-基于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
576
原创 文本超过2行显示省略号失效-postcss没有向下兼容
文本超出2行部分显示省略号，代码如下：overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;发现代码失效，还是超出，百度尝试了一些方法：1.给这块内容加宽度；2.设置位置，使其不会脱离文档流；3.加上white-space:pre-line;（合并空白符序列，但是保留换行符）4.给代码加这两行注释.xxx{ w
2020-07-16 20:49:21
260
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人