weixin_43045869的博客

原创 React Hooks 精讲：写给 Vue 开发者的 React hooks 使用指南

本文从Vue开发者视角出发，介绍React Hooks这一函数组件的革命性特性。作为React 16.8引入的重要功能，Hooks让函数组件首次拥有了状态管理和生命周期能力。文章将帮助熟悉Vue的开发者克服学习曲线，深入讲解Hooks的使用方法和实现原理，实现从入门到源码解析的进阶学习。通过对比Vue与React的差异，使Vue开发者能更平滑地掌握React Hooks的核心概念和应用场景。

原创 React 和 Vue的自定义Hooks是如何实现的，如何创建自定义钩子

</div>try {if (!}, [url]);// 使用示例return (<ul>))}</ul>// 自定义计数器组合函数// 使用自定义组合函数</script><template><div>

原创 为啥 Vue 和 React 都选择了 Hooks ？什么是Hooks ？它的主要作用是什么？

Hooks 是一组函数式 API，允许你在函数组件中使用状态（state）、生命周期等原本只有类组件才支持的特性。无类组件：完全基于函数组件开发。逻辑复用：通过自定义 Hook 共享状态逻辑（取代高阶组件或渲染属性）。代码组织：将相关逻辑聚合到独立的 Hook 中（而非分散在生命周期方法里）。常见 Hooks 示例useState：管理组件状态。useEffect：处理副作用（如数据请求、DOM 操作）。useContext：访问上下文。自定义 Hook：如useFetch。

原创 React 的常用钩子函数在Vue中是如何设计体现出来的。

React 通过 useState 和 useReducer Vue 通过 ref 和 reactiveReact 通过 memo 和 useMemo useCallbackVue 通过 v-memo 指令和 computed 计算属性memo 允许你在属性不变时跳过重新渲染组件。useMemo 是一个 React 钩子，可让你在重新渲染之间缓存计算结果。useCallBack 包裹就能防止函数体在渲染的时候重复创建。

原创 JavaScript 框架语法特性对比

JavaScript 框架语法特性对比

原创 vue3 点击视口其他区域隐藏dom元素

点击视口其他区域隐藏dom元素

原创 el-tree-select 多选树形下拉框，实现当选中时，根据当前选择的对象，动态生成表单数据。

/

原创 前端使用 spark-md5 实现大文件切片上传

【代码】前端使用 spark-md5 实现大文件切片上传。

原创 elementUI 循环出来的表单，怎么做表单校验？

【代码】elementUI 循环出来的表单，怎么做表单校验？

转载 element-ui form表单，select多选时，初始自动校验问题解决

在使用 el-select 多选框配置表单校验时，若绑定值为空字符串，表单会自动触发校验并显示红色提示文字，影响用户体验。问题的根源在于 form 表单中的 select 默认值为空字符串，而非预期的空数组。解决方法是，将绑定值改为空数组，确保在多选模式下定义的变量为数组类型。这样可以避免不必要的校验提示，提升表单的交互体验。

原创 Vue3 怎么在ElMessage消息提示组件中添加自定义icon图标

/style>

原创 vue3 单文件组件模版

【代码】vue3 单文件组件模版。

原创 控制 ElementUI el-table 树形表格多选框的显示层级

1、你可以通过 selectable 属性来控制哪些行可以选择（显示多选框）2、通过 css 隐藏被禁用的多选框。

原创 elementui table禁用全选,一次限制勾选一项。

2、使用动态css 隐藏顶部全选框。添加属性：:header-cell-class-name=“hideAllCheckbox”1、设置属性：@selection-change=“handleSelectionChange”

原创 关于修改 vue Element admin、若依， 等后台管理系统模板的一些全局样式问题：

原创 npm 报错 unable to resolve dependency tree

其实提示上有：npm ERR!

原创 element UI element plus 设置input输入框只能输入整数和小数，第一位不能为点，只能输入一个点

主要用于输入经纬度。

原创 elementUI 表格隔行换色，修改table表头背景样式

要修改elementUI 的表格默认样式，需要有足够的耐心，在浏览器中寻找它自带的样式，然后在本地公共样式中覆盖。在项目公共css文件中，添加如下代码。

原创 [BABEL] Note: The code generator has deoptimised the styling of xxxxxxx/typescript.js as it exceeds

在Babel配置中，compact选项的作用是控制生成的代码是否进行压缩和优化。当compact设置为false时，Babel会生成更紧凑、优化的代码，这有助于减少代码体积，提高运行效率。然而，这种优化可能会导致调试变得更加困难，因为优化后的代码可能难以追踪和调试‌。在项目根目录下新建.babelrc 添加下面的内容。

原创 Vue中优雅的使用Echarts的三种方式

这个例子中，EChart.vue组件通过props接收ECharts的配置项option，并在组件的mounted生命周期钩子中初始化ECharts实例，在watch中监控option的变化，并更新图表。）是ECharts 的 Vue.js 组件，基于 ECharts v4.1.0+ 开发，依赖 Vue.js v2.2.6+，意思就是可以直接把echarts实例当中vue中的组件来使用，不用每次都获取dom、挂在dom，轻松使用echarts的所用功能。vue中使用，直接添加options 数据即可。

原创 WebGIS三维地图框架--Cesium

Cesium 是WebGIS四大地图框架之一（其他框架可以参考我的上篇文章），主要用于渲染3D地图。Cesium是一个用于创建三维地球和地图应用程序的JavaScript库。它利用WebGL技术实现高性能的地球渲染，为开发者提供了强大的地理空间分析和可视化功能。Cesium不仅支持地球表面的三维渲染，还可以展示地球上的各种数据，如卫星轨道、地质信息等。借助Cesium，开发者可以在Web浏览器中实现惊人的三维地球应用。

原创 SuperMap是干嘛的

‌SuperMap是超图软件旗下的一个品牌，专注于地理信息软件（GIS）和空间智能领域的基础软件与应用软件开发。‌它是亚洲最大的GIS软件提供商之一，全球排名第二。SuperMap软件在数字中国、数字政府、企业数字化、数字孪生、元宇宙和智慧城市中扮演着重要的技术底座角色。‌总结：超图（SuperMap）是国内的一款地理信息系统软件公司。他们集成了市面上主流的GIS框架，如：Leaflet、OpenLayers、Mapbox，但是它没有 Cesium 版本。这四个框架的区别可以参考我上个文章（

原创 WebGIS四大地图框架：Leaflet、OpenLayers、Mapbox、Cesium

WebGIS四大地图框架：Leaflet、OpenLayers、Mapbox、Cesium

原创 webGIS和webGL的区别

WebGL是一种基于JavaScript的图形库，用于在Web浏览器中实现高性能的3D图形渲染。它基于OpenGL ES 2.0标准，可以在支持WebGL技术的浏览器中直接利用GPU进行图形渲染，实现高性能的图形展示效果。WebGIS是一种基于网络的地理信息系统，它允许用户通过Web浏览器访问、查询、分析和可视化地理空间数据。WebGIS结合了地图服务、地理信息数据库和前端地图库，为用户提供交互式的地图浏览和空间数据分析功能。

原创 momentjs dayjs 设置时间区间

dayjs 中文文档。

转载 js 循环遍历对象，如果有空值就删除该项（Object.keys）

使用 Object.keys 取出key值，并循环判断。

原创 vuex模块化使用

1、Mutations是同步的，这意味着在mutation中的函数执行时，不能包含任何异步操作，如Promise或者setTimeout等。actions适用于复杂的状态变更，特别是那些涉及到异步操作的情况，如数据获取，提交表单。2、Mutations可以直接修改state，但必须通过提交mutation的方式来进行，通常在组件中通过this.在组件中使用 Vuex： 在需要访问或修改状态的组件中，你可以使用Vuex提供的辅助函数。，它们的主要职责是执行异步操作，然后通过提交。payload)来触发。

原创 封装element UI 全局loading

【代码】封装element UI 全局loading。

原创 js 查找数组对象中id相同的元素，把他们放到新数组对象中

这段代码会输出一个新数组，其中的每个对象都包含一个id和一个items数组，items数组包含所有具有相同id的元素。可以使用JavaScript中的Array.prototype.reduce方法来实现这个功能。

原创 js截取字符串最后一个*后面的数据

js截取字符串最后一个*后面的数据。

原创 js 实现数组中多项置顶

js 将数组中的某一项放到最前面。js 实现数组中多项置顶。

原创 一个vue mixin 小案例，实现等比例缩放

vue mixin

原创 淘宝镜像临时使用

npm install 依赖包 --registry https://registry.npmmirror.com。npm --registry https://registry.npmmirror.com install 依赖包。

原创 js中定义类的方式：

js中定义类的方式

原创 elementUi的el-select同时获取value和label的三种方法

【代码】elementUi的el-select同时获取value和label的三种方法。

原创 封装Vue Element的Form表单组件

效果子组件：<template> <div class="search_input"> <el-form :size="size" inline :model="searchData" :rules="rules" ref="searchForm" :label-width="labelWidth"> <el-form-item v-for="item in searchForm" :label="item.label" :key="i

原创 vscode 插件 projectManager 使用

插件 projectManager 便于在VScode中管理多个项目，不用每次都保存为工作区。

原创 css 线性渐变

线性渐变 - 从左到右（to right）/从右到左(to left)线性渐变 - 从上到下（默认情况下）对角 - 左上角到右上角。

原创 原生jquery实现移动端滑动分页

原生jquery实现移动端滑动分页计算公式：a-d+b-c = 152-50+800-852=50 < 55。如果我们设定this.offset=55。所以此时可以触发加载新内容.此时滚动条向下滚动了50。

原创 关于element UI 下拉选项select 绑定值无法翻译后回显

在做 select 组件下拉回显时，后台返回的选项 id 值有的是 字符串类型：id : ‘1’，而elementUI 做了严格判断类型必须是number类型。