- 博客(96)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 React-路由
各个主流框架的路由常用的路由模式有俩种，history模式和hash模式，ReactRouter分别由。当访问的是一级路由时，默认的二级路由组件可以得到渲染，只需要在二级路由的位置去掉path，设置。通过 URL 路径传递参数（需提前在路由配置中定义动态段 :params）。通过state属性传递对象（数据不会暴露在 URL 中）key=value形式传递参数。
2025-04-29 01:47:03
1017
原创 React-Hook
自定义Hook是以 use 打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用setValue(!value)return (</div>value)// }return (</div>// 自定义hooks// 可复用的逻辑代码setValue(!value)// 哪些状态和回调函数需要在其他组件中使用，就returnreturn {value,toggle。
2025-04-26 17:42:03
365
原创 React-JSX语法
遇到 < 开头的代码, 以标签的语法解析: html 同名标签转换为 html 同名元素, 其它标签需要特别解析；遇到以 { 开头的代码，以 JS 的语法解析: 标签中的 js 代码必须用{ }包含；对于 label 标签的 for 属性，使用 htmlFor 标签代替，标签的class属性，使用className代替；
2025-04-24 09:36:48
434
原创 基于canvas画布的实用类Fabric.js的使用
一、Fabric.js简介Fabric.js是一个对canvas进行封装的Javascript库，在原生canvas之上提供了交互式对象模型，通过简洁的api就可以在画布上进行丰富的操作。它主要的功能包括在canvas上创建和填充图形，比如矩形、圆形、多边形；生成的图像自带缩放、旋转、拖拽等功能；还可以给图形填充渐变颜色；各个图形可以相互组合等等。
2023-07-31 18:16:28
6193
2
原创 基于canvas画布的实用类Fabric.js的使用Part.3
• 自由绘画 • 绘制背景图片 • 绘制文本 • 绘制线和路径 • 自由绘制矩形 • 自由绘制圆形 • 自由绘制椭圆形 • 自由绘制三角形 • 自由绘制多边形
2023-04-03 17:38:28
1401
原创 基于canvas画布的实用类Fabric.js的使用Part.2
一、分组（Groups） Groups是Fabric最强大的功能之一，它可以将任意数量的Fabric对象组合在一起，形成一个小组，分组后，所有对象都可以一起移动、修改、缩放、旋转甚至更改其外观等
2023-02-24 09:41:10
1441
原创 基于canvas画布的实用类Fabric.js的使用Part.1
每个Fabric对象都有一个animate方法，该方法可以动画化该对象，animate(动画属性，动画的结束值，[动画的详细信息])
2023-02-22 10:35:44
2028
原创 uni-app 小程序获取实时定位和车辆签到（wx.getLocation方法）
uni-app 小程序获取实时定位和车辆签到（wx.getLocation方法）
2022-10-20 17:41:04
6323
18
原创 uni-app 小程序获取实时定位和车辆签到（wx.onLocationChange方法）
uni-app 小程序获取实时定位和车辆签到（wx.getLocation方法）
2022-06-22 11:51:30
7697
原创 Vue-移动端适配rem、vw、vh
一、移动端适配rem1、安装lib-flexiblenpm i lib-flexible --save2、在main.js引入lib-flexible// main.jsimport 'lib-flexible/flexible'3、安装postcss和postcss-pxtoremnpm install postcss postcss-pxtorem --save-dev4、配置postcss-pxtorem在根目录下的.postcssrc.js文件...
2022-04-08 15:38:10
2241
2
原创 ECharts相关参数说明
1、xAxisxAxis: { show: true, // 是否显示x轴 position: 'top', // x轴的位置 top、bottom type: 'category', // 坐标轴类型 value、category、time、log name: '姓名', // 坐标轴名称 nameRotate: 10,
2022-02-23 10:16:04
1146
2
原创 Vue-使用element-resize-detector监听元素大小变化
1、应用场景底部固定按钮栏使用 position: fixed 固定定位，宽度等于右侧内容栏的宽度，当我们左侧菜单栏收起的时候，其宽度也能够自适应变化。也就是说底部栏的宽度需要监听其父元素右侧内容的宽度从而实现自适应变化。2、 解决方法：使用 element-resize-detector（1）下载npm i element-resize-detector --save（2）导入const elementResizeDetectorMaker = requir...
2022-02-16 14:19:20
5138
原创 Vue-图片懒加载
1、安装npm install vue-lazyload --save-dev2、引入// main.jsimport VueLazyload from 'vue-lazyload'Vue.use(VueLazyload, { preLoad: 1.3, error: require('./assets/images/vehicle-placeholder.png'), loading: require('./assets/images/vehicle-placeholder
2022-01-14 16:00:49
161
原创 Vue-利用v-model和.sync进行父子通信
1、v-model通常子组件更新某个变量并需要告知父组件时，需要子组件$emit触发事件，然后父组件$on监听该事件再去改变值。 但熟悉 v-model 的双向数据绑定原理后，我们可以巧妙地运用这一原理去实现父子组件之间动态传值：父组件通过 v-model 绑定一个变量传给子组件； 子组件通过 props['value'] 接收； 子组件通过 this.$emit('input', n) 去改变父组件中v-model绑定的变量。// 父组件<temp...
2021-12-15 16:17:36
1228
原创 Vue-异步树+自定义穿梭框的实现
1、效果图2、需求 首先接口获取到已添加人员列表，然后通过异步树+穿梭框进行人员的增加和删除。使用树结构展示组织信息，点击父节点展开按钮获取该组织下的所属组织，点击树节点传递获取该组织的所属人员，将人员展示在待添加列表，人员可以左移右移，并且左移时会进行回显（只回显属于该组织下的人员），最后点击保存就将右侧已添加列表进行保存。3、源码<template> <div> <el-button ...
2021-12-14 15:38:16
1482
原创 CSS-自适应正方形的实现
1、效果展示 html结构如下：<body> <div class="card-box"> <div class="card"></div> </div></body>2、实现方法（1）设置垂直方向的padding在 CSS 中，margin 和 padding 的百分比是相对于父元素的宽度来计算...
2021-11-26 17:37:41
1546
4
原创 数组去重方法和性能对比
1、数据模板let arr1 = Array.from(new Array(100000), (x, index) => { return index;})let arr2 = Array.from(new Array(50000), (x, index) => { return index + index;})let arr = arr1.concat(arr2);function distinct() { }console.log("开始数组去重，
2021-11-25 17:07:41
824
原创 Vue-图片上传el-upload和blob转base64
1、文件上传<template> <el-form :model="form" label-position="top" ref="form"> <el-form-item label="二维码" required> <el-upload ref="upload" class="upload-image" action="" :auto-upload="false" single-file list-type="
2021-11-25 14:48:03
2295
原创 html2canvas截屏
1、安装npm install --save html2canvas2、导入import html2canvas from "html2canvas"3、基本语法let dom = document.getElementById("id"); html2canvas(dom, { backgroundColor: "#fff",}).then((res) => { let url = res.toDataURL("image/png"); cons
2021-09-28 15:38:01
1007
原创 Vue-刷新页面
1、provide、inject方法通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载。 app.vue文件代码：<template> <h-page id="app"> <router-view v-if="isRouterAlive" /> </h-page></template><script> export ...
2021-09-28 10:11:12
252
原创 Vue-文件上传和下载
1、a标签download属性在H5中，为a标签新增了一个download属性，来直接文件的下载，文件名就是download属性文件名。download属性暂时只支持Google Chrome 和 Mozilla Firefox，其他浏览器均不支持该属性； download是H5新增的属性，H5以前没有该属性；2、URL.createObjectURLURL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL，这个URL的生命...
2021-09-16 13:56:58
1339
1
个人博客网站.zip
2020-04-26
全民飞机大战.zip
2020-04-25
webpack配置文件.zip
2020-04-15
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人