- 博客(28)
- 收藏
- 关注
RSS订阅原创 uniapp vue3项目定义全局变量，切换底部babar时根据条件刷新页面
uniapp项目中，每个tabbar页面来回点时候，不会触发页面更新。但是有时页面上有数据发生改变需要更新模版时，就得能及时的通知到页面。如果在onshow生命周期里每次都调用异步请求更新数据，有些不合理，况且页面有时不需要更新。经过思考，我们可以定义一个全局变量，根据全局变量的值来看是否需要更新数据。
2025-03-17 16:56:21
286
原创 前端存储-indexdb封装：dexie.js的使用
indexedDB是一个用于在浏览器中存储较大数据结构的Web API，并且提供了索引功能以实现高性能查找。dexie.js是对indexdb的封装，前端用起来很方便。在此介绍一下项目中用到的操作语句，也方便记录。我的项目是vue3项目。
2025-03-14 16:46:23
309
原创 uniapp scroll组件下拉刷新异步更新数据列表
如图所示，下拉刷新，更新聊天列表。来实现。
2025-03-14 11:19:48
178
原创 uniapp vue3项目用原生h5 audioContext实现语音文件倍速播放，可适应h5和安卓app
uniapp项目要做类似微信的聊天语音播放功能，可以切换语音，可以点击切换播放/停止播放状态，还可以倍速播放。开始用了uniapp的音频组件uni.createInnerAudioContext()，很好用但就是倍速播放playbackRate属性不起作用，经过研究，决定用原生h5的audioContext。AudioContext是Web Audio API的一部分，它代表了一个音频处理图，允许开发者在网页上对音频进行精细的控制和处理。
2025-03-13 17:24:21
449
原创 js获取某月往前推一年或半年的年月数组
需求：需要显示某月份往前推一年或者半年的费用情况，显示到柱形图上，后台接口只返回有数据的年份，这就需要前端拿全部月份数组去比对并显示。
2024-04-23 17:02:17
479
1
原创 move the returned value immediately after the `=＞`
【代码】move the returned value immediately after the `=＞`
2024-02-19 16:17:54
912
原创 Configuration for rule “linebreak-style“ is invalid: Value [“error“,“windows“] should NOT ha
【代码】Configuration for rule “linebreak-style“ is invalid: Value [“error“,“windows“] should NOT ha。
2024-01-30 15:31:00
236
原创 The engine “node“ is incompatible with this module. Expected version
yarn node版本报错
2022-10-11 14:03:43
5047
1
原创 vue addRoute 实现子账号权限管理
前言系统在用了一段时间后，产品经理提出了新建子账号并可配置菜单权限的需求。配置子账号拥有部分菜单权限，并在子账号登录后，在地址栏直接输入本不属于该子账号的页面路由，要求重定向到404页面，即实现拦截。开始经过各种查阅资料，决定使用addRoute 动态添加路由。后台在登录后会返回账户菜单，是一个code的str合集，这个code对应每个菜单的code，是前后台约定好的。步骤如下：1、router/index.js：定义初始路由constantRoutes 和动态变化的路由DynamicRoutes
2022-02-07 16:23:54
554
原创 前端div块的瀑布流布局
前言如图，每个新闻类别是一个块。新闻类别个数是动态的，每个类别的新闻条数是动态的，产品经理要求做成图中这样的瀑布流布局。借鉴别人图片的瀑布流布局，来实现这个新闻块的瀑布流布局。开始对于图片的瀑布流布局来说，有定宽或者定高。我选择定宽的方法。但是在实际情况中，浏览器有多种屏幕宽度，既要给每个div块定宽，又要做到自适应。所以在这里，1、我用css计算并设置不同屏幕下div块的宽度：如在>1500宽度下，可以放置5列，除去中间的间距，每列宽度为width:calc(100% - 30px*4)
2021-06-23 16:53:33
1512
转载 vue项目更新后文件存在缓存，需要强制刷新才能呈现更新
前言vue项目每次发布新版本后，测试人员都要强制刷新才能更新浏览器代码来验证bug。对于用户来说，这更不合理。于是，想办法让浏览器自动更新文件。开始1.在static静态目录下新建version.json每次发版更改里面的版本号{ "version": "1.0.1"}2.在src中新建 libs/versionUpdate.js文件import axios from 'axios' const isNewVersion = () => { let url = `//$
2021-06-23 15:43:23
12274
11
原创 uni-app微信小程序报错：更改appid失败touristappid Error:tourist appid
事情是这样的，我用HbuilderX新建了一个uni-app小程序，然后运行到微信开发者工具，原本正常开发，后来我在微信开发者工具中，把 project.config.json文件中的 “appid”: “touristappid”，改为了一个我之前开发过的小程序的appid，然后保存文件报错。撤回更改后仍报错。这时无法改回默认的touristappid。我打开微信开发者工具，点击新建小程序，生成一个测试号，然后把测试号的appid用于这个小程序就可以了。如果后续申请了appid，可以改为新的app
2021-04-01 10:16:18
10162
3
原创 Echarts的一些配置
前言在此记录echarts使用过程中的一些配置。开始一、整体使用以一个环形图为例：html<div id="myChart" :style="{width: '100%', height: '180px'}"></div>js部分drawWarningLine(list) { let warningChart = this.echarts.init(document.getElementById("warningChart"));
2021-03-17 14:04:07
1920
原创 react antd-design Modal里加form表单，用ref回显数据，第一次打开取到的是null
开始react项目里，使用ui框架ant-design。table列表的每一行都有编辑按钮，点击编辑，弹窗Modal出现，里面使用Form表单，然后用ref回显数据。但是发现第一次点编辑打开弹窗，ref取到的current总是null，关闭再次打开就可以正常取到。解决方法Modal里有一个属性为强制渲染给Modal加上此属性即可。 forceRender = {true}上全部代码：import React, { Component } from 'react';import { Fo
2020-11-30 14:32:37
6059
3
原创 vue element-ui左侧菜单移入移出折叠效果
前言由于项目主页面数据较多，需要通屏展示，所以要将左侧导航做成可以折叠的效果。效果如下（请忽略一下gif图的水印吧 T^T）：鼠标移入左侧蓝色按钮，导航从左侧缓慢滑出，右面内容加遮罩层；点击右面遮罩层部分，遮罩层消失，导航向左缓慢滑出。开始上代码：app.vue<template> <div> <el-container> <span class="slideIcon" @mouseover="open">
2020-11-26 16:47:04
4744
1
原创 react报错：Cannot read property ‘forEach‘ of undefined at Object.injectIntoGlobalHoo
react项目启动后控制台报错报错信息：Cannot read property ‘forEach’ of undefined at Object.injectIntoGlobalHoo解决方法：删掉（不是禁用，是移除或者删除）浏览器里关于react的扩展程序，再刷新页面就可以了。在此记录解决问题的过程，也给小伙伴们一些思路。如有不严谨的地方还请不吝赐教。...
2020-11-18 15:24:34
1942
原创 安装webpack一直提示要安装webpack-cli
安装webpack后，执行webpack -v 查看版本时候，一直提示要安装webpack-cli。查询相关资料，如果是webpack4+版本， 还需要安装 cli，因为webpack 4将 cli 分离出来了。我文件夹里安装cli，npm install --save-dev webpack-cli结果还是提示要安装cli。然后执行全局安装命令就可以了。npm install --save-dev webpack-cli -g在此记录解决问题的过程，也给小伙伴们一些思路。如有不严谨的地方
2020-08-20 17:05:10
3025
原创 create-react-app安装出错
安装 create-react-app执行命令：npm i -g create-react-app结果出错，错误如下：淘宝镜像换源：//换源npm config set registry https://registry.npm.taobao.org//查看npm config get registry再次执行安装命令报错：这时候我去到 C:\Users\Lenovo\AppData\Roaming\npm\node_modules 文件夹，把create-react-app 文
2020-07-28 15:26:31
1864
原创 vue自定义插件--右上角通知框，随任务的轮询结束可自动关闭
前言最近在做一个基于vue的云控制台的项目，其中包括很多创建主机、创建云盘等功能，但是创建需要一个时间，得做一个正在创建中的消息通知窗进行展示来告知客户，同时随任务的结束，通知窗显示成功失败，并可以自动隐藏或者手动关闭。elementui里有一个Notification通知插件，但是有好多地方不符合我的需求，于是查阅资料自己封装一个。业务逻辑总结一下业务逻辑：当点击触发某任务时，首先后台接口返回操作成功，并有任务taskid列表，效果如下：任务正在进行：任务成功：实现文件目录代码
2020-07-23 10:59:28
2206
原创 循环中调用异步接口获取数据
前言遇到这样一个需求：调用接口，返回一个新闻列表，再循环这个新闻列表，用每个新闻的id异步请求这个新闻的视频地址，这就需要在循环里调用接口。如果用for循环，接口还没请求完成，for循环就已经执行完了。所以改成promise去处理。开始整体思路就是：先存数组，然后循环生成每一个promise，然后用promise.all来调用，then的时候返回的是一个结果数组。1、首先定义循环里的异步请求getInfo(item ,index){ return new Promise((resolve,
2020-07-17 10:07:33
4987
原创 elementui form表单自定义验证两个输入框大小的规则
前言有这样一个表单，需要判断结束端口大于起始端口。起始端口的prop:pubPortStart，结束端口的prop:pubPortEnd。开始开始我是这样定义的，分别去定义两个接口的验证规则，然后再验证规则里再去验证另一个输入框，这样就回造成重复调用，浏览器报错。<script> export default{ data(){ var validateStart = (rule, value, callback) => { if(this.portTy
2020-06-08 10:44:16
4914
2
原创 Maximum call stack size exceeded
vue项目配置好路由后报错：Maximum call stack size exceeded;Cannot read property ‘matched’ of undefined;通过查阅各种资料，发现了解决办法，配置路由时候，redirect用错，去掉后就可以了。...
2020-04-23 15:50:54
430
原创 h5手机端适配字体设置
前言手机端页面动态设置根元素，适配不同屏幕大小。开始<script> //rem为html的字体大小 通过改变html的字体大小达到适配的效果 remChange(); //监听屏幕改变resize事件 触发remChange方法 window.addEventListener("resize", remChange) function r...
2019-09-18 14:22:28
5310
原创 vue动态生成表单并加验证规则，input输入框无法输入
vue动态生成表单，input输入框无法输入前言开始需要注意的地方前言开发过程中，遇到一个页面是纯表单配置页面，表单项有四五十个，于是只能想办法动态生成。开始1、后台返回数据格式为： ``` formData: [{ surplusValue: 100, usedValue: 0, quotasValue: 100...
2019-08-06 14:47:32
7505
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人