- 博客(22)
- 收藏
- 关注
RSS订阅原创 如何通过react-router-dom V6.4 中的loader优雅的实现菜单权限和登陆拦截功能
如何通过react-router-dom V6.4 中的loader优雅的实现菜单权限和登陆拦截功能
2022-09-28 21:45:13
2011
1
原创 前端prettier+eslint+stylelint+commitlint
前段项目的prettier,eslint,stylelint,commitlint的实现
2022-07-06 12:49:17
438
原创 总结一下react-native项目中常用的库
@react-native-async-storage/async-storage 类似浏览器的storage功能npm地址：npm i @react-native-async-storage/async-storagegithub地址：https://github.com/react-native-async-storage/async-storage@react-native-community/netinfo 获取设备当前网络状态npm地址： npm i @react-native-comm
2022-04-01 15:48:11
1195
原创 mac安装rn的android环境
1 当前电脑信息：MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports) 处理器：2.3 GHz 双核Intel Core i52 打开rn的英文文档： https://reactnative.dev/docs/environment-setup. 中文文档： https://www.react-native.cn/docs/environment-setup.中英文文档还是有点区别3 按照文档我们一步步往下操作3-1 下载Android-Studio
2022-03-08 11:18:26
3438
原创 ImageUploader的使用
import { ImageUploader } from 'ant-mobile'const [fileList, setFileList] = useState<ImageUploadItem[]>([]); const beforeUpload = (files: File[]) => { return files.filter(file => { if (file.size > 3 * 1024 * 1024) { Toast.
2022-03-05 13:28:34
3487
1
原创 记录一下第一次独立完成antpro搭建的react项目中的权限管理
antProg官网中的权限参考1. 我的路由 router.tsexport default [ { path: '/', }, { path: '/Statistics', layout: false, component: './Statistics', }, { path: '/user', layout: false, routes: [ { path: '/user', ro
2022-02-09 11:23:09
914
原创 antPro中如何使用自定义字体
1 找到config文件夹下的config.ts文件2 下载 yarn add url-loader -S3 新建文件夹 src/fonts/RoboData-Beta1.0-Regular.otf 具体的字体文件问ui要4 添加如下配置 chainWebpack(config) { config.module .rule('otf') //自己取的名字 .test(/\.(otf|ttf|TTF)(\?.*)?$/) //匹配规则 .use('u
2022-02-09 10:50:47
2201
4
原创 echarts实现 3d饼图
3d饼图charts.ts// 生成扇形的曲面参数方程，用于 series-surface.parametricEquationexport const getParametricEquation = ( startRatio: number, endRatio: number, isSelected: boolean, isHovered: boolean, knum: number, h: number,) => { // 计算 const midRatio
2022-02-07 17:47:31
4867
原创 百度地图如何清除上一次的覆盖物
试了文档中的几个api总有一个覆盖物清除不掉，最后这样解决了// mapInstance是地图实例const allOverLays = mapInstance.getOverlays(); // 先清除覆盖物 allOverLays.forEach((_: any, index: number) => { allOverLays[index].remove();});...
2022-02-07 17:28:33
731
原创 react中如何实现下拉菜单
react中如何实现下拉菜单思路：1点击某个特定区域展示下拉框,点击其他任意区域隐藏下拉框2选择某个选项隐藏下拉框,再次打开时滚动到选中的选项##### html部分```html<div className={styles.staticDep}> <span className={styles.label}>统计单位</span> <div ref={selectRef} onClick={() => setIsShow(!isShow)
2022-02-07 17:22:39
5785
原创 AES加密
// 具体需要后端一起配合 经供参考import cryptoJS from 'crypto-js'const encryptionAES = (params) => { const keys = 'f1d510a5c54f469699e511988433f309' // 加密key const key = cryptoJS.enc.Latin1.parse(keys) const randomData = randomString(16) const iv = cryptoJS
2021-11-19 15:51:47
385
原创 如何指定元素实现全屏效果
实现容器全屏放大效果1 npm i screenfull -S 下载插件screenfull2 引入import screenfull from 'screenfull'需求描述: 后台系统中通过iframe嵌套一个数据可视化页面, 支持全屏放大查看iframe页面遇到的问题: f11会将后台系统的侧边栏也放大，使用原生提供的全屏放大和缩小方法碰到其它问题解决: 我这以react为例, vue类似// 定义一个全屏的方法const screenfullFn = () => { /
2021-09-24 17:47:01
518
原创 stylelint格式化样式
stylelint格式化样式1 下载插件 npm i stylelint stylelint-config-standard -D2 在根目录下新建 .stylelintrc文件3 在package.json中增加命令 "lint": "stylelint \"src/**/*.(scss|vue|less|css)\" --fix""scripts": { "start": "react-scripts start", "build": "react-scripts build", "
2021-08-31 16:53:55
563
原创 如何通过prettier格式化项目代码风格
如何统一代码风格1 下载插件 prettier(用于格式化代码) chalk(用于控制终端字体颜色)2 配置格式化代码脚本命令3 运行格式化代码脚本prettier 官网 如何配置1 根目录下新建一个scripts文件夹2 scripts文件夹下新建两个文件 prettier.js getPrettierFiles.js3 在根目录下新建一个配置文件 .prettierrc (用于配置代码格式 )3 在package.json中创建命令 "prettier": "node ./scri
2021-08-31 15:03:07
654
原创 react项目通过customize-cra进行ant主题色的修改 webpack的配置
1 我们可以运行命令 yarn run eject / npm run eject 暴露脚手架的webpack配置, 然后进行配置2 我们也可以在不暴露的情况下进行配置，将我们的配置最终也能合并到脚手架配置中步骤1 下载 yarn add customize-cra react-app-rewired -D 或者 npm i customize-cra react-app-rewired -D2 修改项目启动命令： "scripts": { "start": "react-app-rew
2021-08-28 17:51:36
591
原创 前端实现图片下载功能
// 方法1 使用时可能存在跨域问题具体看你项目function downloadWithBlob (url, name) { fetch(url).then(res => { res.blob().then(blob => { let a = document.createElement('a') let url = window.URL.createObjectURL(blobj) let filename = name || '图片.jp
2021-06-22 15:30:54
343
原创 vue3中如何使用vue-i18n
vue-i18n下载vue3版本的vue-i18nnpm install vue-i18n@next -S我当前使用版本 "vue-i18n": "^9.1.6"1 vue3版本的vue-i8n用法还是有挺大区别的相对于之前的版本// language文件夹下的index.js // zh, en, id 分别为三种语言文件import { createI18n } from 'vue-i18n';import zh from './zh';import en from './en';
2021-06-18 15:42:16
5700
原创 前端验证码，RSA加密
发送验证码的实现 1 使用vant中的File组件, 并且在里面添加template模板，嵌套发送验证码和倒计时CountDown组件, 用个变量控制是否是点击了倒计时，初始为false, 点击了发送验证码变量设置为true,倒计时结束设置为false, 通过这个变量v-if v-else显示是倒计时还是显示发送验证码 2 <template> <Field v-model='info.captcha'
2021-05-18 11:15:27
531
2
原创 如何在react中实现路由的切换动画
如何在react中实现路由的切换动画1 yarn add react-animated-router --save 或者 npm i yarn add react-animated-router --save 插件2 yarn add react-transition-grop --save 第一个库依赖这个库具体用法import React, { Component } from 'react'import { HashRouter as Router, Switch, Route } fro
2021-03-20 11:31:22
819
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人