- 博客(50)
- 收藏
- 关注
RSS订阅原创 echarts解决数据差异过大的问题
设置负数的y轴yAxis.inverse=true，让Y轴绕X轴上下翻转，并配置y轴标签显示yAxis.axisLabel.formatter=(val) => val === 1?负数柱状图series.data只展示小于0的数据，并展示为绝对值，其余为null（barDatas.map(item => item < 0?因为对数轴的数据不能为0，所以需要设置上下yAxis的min为1，再通过yAxis.axisLabel.formatter将y轴的1改为0。这种方式能很好的解决数据差异过大的问题。
2024-07-12 08:26:34
2773
原创 Scroll上下滚动轮轮播实现
如上图，实现功能是，列表上下滚动轮播，用户鼠标移动到列表区域，滚动动画停止，鼠标移开滚动继续。上述列子用REACT+CSS技术框架实现。
2024-07-11 08:49:24
258
原创 Swiper轮播图实现
主要用的是css的transform和transition来实现左右切换动画效果。此例子实现技术框架是用的React+CSS。
2024-07-11 08:42:25
220
原创 react启用mobx @decorators装饰器语法
react如果没有经过配置，直接使用decorators装饰器语法会报错：因为react默认是不支持装饰器语法，需要做一些配置来启用装饰器语法。
2024-07-10 15:56:18
624
原创 react useRef().current变化无法触发useffect更新原因
react useRef().current变化无法触发useffect更新原因
2023-03-02 16:07:23
4090
1
原创 CSS学习之如何用js修改css
声明一个自定义属性变量，属性需要以“–”开始，属性值可以是任何有效的CSS值。: root {规则集所指定的选择器决定了自定义属性的可见域。root下的自定义属性，可以在全局任何地方访问到它。备注： 自定义属性名是大小写敏感的，–my-color 和 --My-color 会被认为是两个不同的自定义属性。
2023-03-01 11:41:45
1328
原创 Angular学习总结-跨域配置
日常开发中，接口联调，跨域问题不可避免。下面将Angular如何跨域做一个分享。假如，对接某接口完整地址为：https://172.168.1.20:2330/api/test/getList在package.json同级目录下新建proxy.config.json文件。并添加内容：将接口请求地址，从“https://172.168.1.20:2330/api/test/getList”改为“/api/test/getList”。修改启动命令。在"scripts"下的“start”参数值后添加“–pr
2022-07-11 15:38:54
1487
原创 vue3学习-vue create报错tunneling socket could not established
vue create报错tunneling socket could not established
2022-04-07 11:26:27
1516
原创 angular学习总结-路由和路由守卫
通过命令新建页面news:ng g page news会在src/app目录下自动生成以下文件，并更新app-routing.module.ts总路由文件。再来看看app-routing.module.ts文件，已自动配置好了新页面的路由。从路由可以看出，我创建了两个页面，一个home，一个news。现在想从home页面跳转到news页面去，并携带参数，该怎么传呢？路由跳转和传参方式一：设定：home页面跳转news页面需要传递参数empNo。第一步：修改路由。src/app/ap
2022-03-03 14:09:41
927
原创 angular学习总结-打包问题
接上篇。angular项目打包命令，可以查看package.json的scripts内容。"scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" },执行打包命令npm build后，即可生成打包文件夹www。问题1：用浏览器打开www中的index.html
2022-03-02 09:30:27
1986
原创 angular学习总结-组件插槽
组件插槽 - Angular官网上叫内容投影，Vue也有一样的功能实现分枝功能技术框架master原APP考勤应用代码angular4+ionic3+Cordovadev迁移钉钉第一版代码，h5微应用angular4+ionic3upgrade迁移钉钉最新版代码，h5微应用angular12+ionic5...
2022-02-24 16:21:23
2694
原创 angular学习总结-基本使用
关于Angular上手学习，可以去官网把示例先敲一遍，边做边学习。点我传送门下面将介绍一些关于Angular的基本知识。生命周期当你的应用通过调用构造函数来实例化一个组件或指令时，Angular 就会调用那个在该实例生命周期的适当位置实现了的那些钩子方法。钩子方法说明ngOnChanges()如果组件绑定过输入属性，那么在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。 （ 注意：如果操作频繁，会严重影响性能。）ngOnInit()在
2022-02-22 14:20:12
1222
原创 angular+ionic学习之项目构建
安装ionic本地全局安装npm install -g ionic或// 用tabobao镜像装会快些cnpm install -g ionic安装完毕后，查看是否安装成功。ionic -vxxxxMacBook-Pro:~ xxxx$ ionic -v5.4.16 ──────────────────────────────────────────────────────────── Ionic CLI update available: 5.4.16 →
2022-01-14 16:54:40
964
原创 echarts 自定义tooltip显示图例颜色
echarts默认的tooltip是自带图例颜色的，如下图：可是很多时候，功能需求会要求提示框带单位或者调整样式。这个时候我们就需要用tooltip的formatter来自定义提示框内容。点我跳转echarts tooltip自定义可一旦用到formatter，图例颜色就会消失。如下图如何设置呢？上代码： formatter(params) { let val0 = params[0]["value"]; let val1 = params[1]["v
2021-11-23 16:13:50
7739
2
原创 react hooks学习之useState set值后，获取值没有更新
设置了一个useState，用setPage来更新Page值。看看打印效果即使setPage了，拿到的page值依旧没有更新。原因：因为setState是异步的，所以在调用setState后，this.state不会立刻映射到新的值。另外也不要指望设置timeout时间来调用，这是无用功（这坑我踩过）。(￣_,￣ )最好的办法，用hooks的useEffect方法，以page作为变量，触发副作用调用getList()，获取新一页的数据。 useEffect(() => { g.
2021-11-23 15:37:54
10953
4
原创 flutter学习笔记-MVVM模式学习解决报错
最近学习flutter，进行mvvm模式学习的时候，报了一错：[VERBOSE-2:ui_dart_state.cc(199)] Unhandled Exception: Error: Could not find the correct Provider<MvvmDemoViewmodel> above this MvvmDemoView WidgetThis happens because you used a `BuildContext` that does not include t
2021-09-09 11:02:41
1470
原创 create-react-app项目所遇问题总结之引入dva
建议引入dva前，大家可以参照官方dva快速上手先用dva-cli脚手架先创建一个react+dva项目，先看看里面的目录结构，以及使用规则配置方式。言归正传，那么在我们用create-react-app搭建的项目中如何引用dva呢？1. 引入依赖yarn add dva -S2. 改造目录和配置嗯，就这样。3. 如何在项目中使用ES7的修饰器@平时开发react项目中，引入ES7的修饰器可以帮助我们优化很多东西，比如说dva的connect连接函数，比如说click方法中的this绑定
2021-06-10 16:45:53
418
原创 create-react-app项目所遇问题总结之跨域
以下为学习react技术栈开发过程中，遇到的问题以及解决方法总结。各位看官请往下瞧！☆〜（ゝ。∂）如何进行跨域？方式一第一步，执行命令yarn eject先将react-scripts的配置释放出来。第二步，配置config/webpackDevServer.config.js在config/webpackDevServer.config.js中全局搜索proxy，找到配置成需要代理的接口配置：(关于proxy的一些参数的含义和配置的规则，不知道的小伙伴可以到网上查阅一下，这里不做说
2021-06-10 16:11:40
1378
1
原创 create-react-app项目所遇问题总结之antd引入和样式不生效问题解决
苦苦思索了许久，本想想像一些技术博主一样写一下写在前面的话，可惜半天也憋不出一个字来。算了直接写吧。1. 引入antd第一步：安装antdyarn add antd -S第二步：安装babel-plugin-import，让antd样式按需加载yarn add babel-plugin-import -S第三步：配置babel-plugin-import的方式方式一：配置package.json在根目录下的package.json的label下的presets后面添加...
2021-06-10 15:38:52
1048
原创 用h5+SVG+js+css实现动态圆环进度
方式一h5代码 <svg width="300" height="300"> <circle cx="150" cy="150" r="100" class="circle1" /> <circle cx="150" cy="150" r="100" class="circle2" transform="rotate(-90,150,150)" id="circle2Id" stroke-dasharray="0,
2021-06-06 14:48:45
456
原创 理解SVG中视窗、viewBox和preserveAspectRatio
viewBoxviewBox就是视野，我们可以把它看作是一张照片。viewBox有四个参数，viewbox="x, y, width, height<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200" ></svg>如上述代码所示，viewBox在画布上定义了一个从(0,0)点开始，宽为100，高为200的可显示区域，超过这个区域边界的元素将不会显示。vi
2021-05-21 14:56:41
713
1
原创 echarts折线图点击x值动态高亮且显示tooltip
预期效果：提示框显示时，相应的x坐标月份高亮（蓝色），同时提示框显示。实现流程：1.设置一个变量axisValue用于接收选中x值，当横轴值等于选中的axisValue时，设置蓝色 axisLabel: { show: true, textStyle: { fontSize: 10, //更改坐标轴文字大小 fontFamily: "PingFangSC-Regular",
2021-04-28 19:49:27
3702
7
原创 postcss-px-to-viewport配置横屏参数landscape: true报错postcss.atRule is not a constructor
首先postcss-px-to-viewport是一款很优秀的插件，他能将px转换成视口单位vw，而vw本质上还是一种百分比单位。所以项目中常使用此插件来解决适配问题前几天，由于项目中有横屏适配的需求，经过查阅插件api后，发现landscape这个参数就是用来处理横屏适配问题的。但是当我配置上后，项目开始启动报错。报错截图如下：报出了这个问题：postcss.atRule is not a constructor后面是试图在网上找找有没有相关的解决方案，可惜并没有找到。也尝试过换插件版本，
2021-04-17 19:26:28
4722
原创 vue项目在vscode中编译eslint报错没显示红色波浪线提示
vue项目在vscode中编译eslint报错没显示红色波浪线提示。如下图所示：下图是预期效果：不符合Eslint校验规则的代码位置都能展示出来，这样一目了然。能帮助我们迅速找到报错的位置。然后在报错的地方右键-》“快速恢复”-》“fix all auto-fixable problem”就能迅速修复问题。重点来了哦！解决办法奉上：oh my god! 点他！点他！点他！在出现的弹框中点击allow就可以了OK！收工！...
2020-11-19 23:17:41
13084
8
原创 vue、js、Angularjs AES加密解密
需要两个js文件。aes.js和mode-ecb.js以angular为例，现在www目录下的index.html文件中引入这两个js文件<!-- 加密相关 --> <script src="build/lib/cryptojslib/rollups/aes.js"></script> <script src="build/lib/cryptojslib/components/mode-ecb.js"></script>然后在需要的
2020-10-28 16:30:29
465
1
原创 angularjs和vue实现RAS加密
一. 什么是RSA？RSA算法是现今使用最广泛的公钥密码算法，也是号称地球上最安全的加密算法。在了解RSA算法之前，先熟悉下几个术语根据密钥的使用方法，可以将密码分为对称密码和公钥密码对称密码：加密和解密使用同一种密钥的方式公钥密码：加密和解密使用不同的密码的方式，因此公钥密码通常也称为非对称密码。二.RAS加密实现。1.angularjs需要引入jsencrypt.min.js。可以执行npm install --save jsencrypt再到node_modules中拿到jsenc
2020-10-26 10:15:15
374
原创 better-scroll快速滑动，出现异常回弹
原因：better-scroll在IOS 13.4版本上快速滑动，回出现异常回弹效果。这是由于IOS版本导致的。解决办法：在BS初始化时，加上useTransition:falsegithub相关issues:iOS 13.4 下 bounce 存在异常
2020-06-03 17:40:12
2501
10
原创 Cannot find module 'eslint/lib/formatters/stylish'
vue项目启动的时候报错：Error: Cannot find module 'eslint/lib/formatters/stylish'解决办法：在package.json 中，将eslint-loader升级到^3.0.0"eslint-loader": "^3.0.0",再执行yarn install 或者npm install
2020-05-12 14:43:18
4425
原创 vue公用组件多项目使用解决,将包发布到npm上
场景一若代码为私有的模块，因为某些原因不能发布到公共的npm仓库，但是又需要在多个项目间共享。解决方法：可以在package.json中来使用git url获取特定的公用代码1.先新建一个vue项目vue init webpack rzh-vue-ui2.在新建项目中加入公共的组件模块如图所示，我新建了一个packages目录，在目录下加入了Hfooter组件代码,并在packa...
2020-04-26 22:43:16
3157
9
原创 js日期实用工具函数
js日期实用工具函数获取当前日期获取当前日期前n个月判断是否为合法日期判断一个时间是否位于两时间之间比较两个日期的大小获取当前月份前n个月或者后n个月（返回日期列表）获取某个月有多少天获取当前日期的前一个月获取当前日期的前两个月根据日期判断今天周几判断两个日期之间的天数差值获取当前日期// 获取当前日期function getNowDate () { let date = new Dat...
2020-04-05 20:49:34
406
原创 vue实现实现3/4 比例圆环（信用分）
效果如下：本来想完全靠自己的力量来实现这个效果，奈何时间紧凑，一时也没有好的思路。困顿之际，恰逢vux的XCircle组件，遂往观其组件源码，茅塞顿开，甚是奇妙。于是将组件源码进行改造一番，如下：<template> <div class="hemp-circle"> <svg viewBox="0 0 100 100"> <d...
2019-11-22 10:16:47
1453
原创 解决input输入限制只能为数字或小数
1.如何实现只能输入数字或小数<input id="maxAmount" v-model="maxAmount" type="number" pattern="number" ...
2019-11-22 09:30:20
1046
原创 如何查看angular、react 、vue最新版本
1.查看angular版本最新版本。点我查看如下图所示：最新版本为9.02.查看vue版本最新版本。点我查看稳定版本如下图所示，最新稳定版为2.6.103.查看React版本最新版本。任意门如下图所示，最新版本为16.10.2...
2019-10-25 17:58:35
851
原创 企业微信对接开发流程
目录企业微信如何收费？如何申请企业微信，创建企业内部应用？企业微信OAuth2接入流程关于网页授权的可信域名如何调用企业微信API？企业微信如何收费？微信微信是免费申请的，不收取任何费用。若企业人数超过200人，需要进入企业微信后台的认证系统进行认证，操作如下：认证费用是300元，认证成功后的企业需要年审，费用是300元/年。如何申请企业微信，创建企业内部应用？1.首先，...
2019-10-25 10:51:34
5010
原创 vue网格拖拽排序
上图是网格拖拽排序的效果图，如果在你的项目中也有这样的需求，那么不妨来看看如何实现。技术框架：vue.js拖拽组件： vue-slicksortvue-slicksort：是一个功能强大的可拖拽的vue.js组件。 它可以自动滚动，锁定坐标系。支持拖拽时，流畅的动画效果。可以支持水平，垂直或者网格的拖拽。支持触摸。安装npm或yarn安装都可$ npm install vue-s...
2019-10-10 16:54:06
1762
原创 【Javascript】一些帮助函数集合军机处！
No.1 取URL上的参数/** * 取URL上的参数 * @param {String} param 参数名 * @return {String} */function getUrlParam (param) { const result = window.location.href.match(new RegExp('(\\?|&)' + param + '(\\[\...
2019-05-10 18:02:49
128
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人