梵心的博客

原创 不刷新页面更新 URL的参数

在单页应用（SPA）中，有时候我们希望能够更新 URL 的查询参数，而不触发整个页面的刷新。更新浏览器历史记录时，要小心不要破坏用户的浏览体验。确保在更新 URL 时提供有意义的状态和标题。下面是一个简单的教程，演示如何创建一个函数，以更新 URL 的查询参数而不刷新页面。这个方法只更新 URL 的查询参数，如果需要更新其他部分，需要相应地调整函数。这种方式通常用于单页应用，因为它不会触发整个页面的刷新。函数，并传入包含新查询参数的对象。，它接受一个包含新查询参数的对象。首先，我们创建一个函数，命名为。

原创 umi创建react项目

运行就直接下载umi并且执行运行脚手架创建，选择项目脚手架类型。创建文件夹,mkdir 是命令，myapp是文件命。这里会选择项目脚手架类型，建议选择ant。选择安装依赖类型，建议选择yarn。│ ○ Vue简单应用程序。cd直接到指定文件夹。│ ○ Umi插件。

原创 js打怪升级之路

假设你有一个订单对象，其中包括用户ID、订单号、商品列表和总价。假设你有一个用户登录状态对象，其中包括用户ID和登录状态（登录/未登录）。假设你有一个用户登录记录对象，其中包括用户ID、登录时间、登出时间。如何计算每个用户的总在线时间？假设你有一个表单对象，其中包括用户填写的表单字段和对应的值。假设你有一个用户投票对象，其中包括用户ID、投票选项和投票时间。编写一个函数，将一个数组中的所有元素按照升序排列，如果元素为数字，则忽略单位。编写一个函数，将一个字符串中的所有单词的首字母大写，其他字母小写。

原创 ECharts图表实现交易所的深度图效果

本教程将向您展示如何使用ECharts库控制Tooltip信息框的移动。我们将使用两个图表作为示例，并分别控制它们的Tooltip信息框在鼠标指针附近移动显示。首先，我们需要准备一个HTML文件，其中包含两个容器用于放置图表。我们使用 和 作为两个容器的ID。以下是示例的HTML结构：这里需要注意一个问题就是要两个表格高度相等，采用的解决方案是图表合并，联动控制Tooltip的移动。步骤 2：初始化图表接下来，我们需要使用ECharts库来初始化两个图表实例，并将其分别放置在 和 容器中。我们

原创 前端开发环境

在本文中，我们将介绍如何搭建一个前端开发环境，包括安装 NVM、Yarn、Git 以及配置 Visual Studio Code 编辑器。完成这些步骤后，您将能够使用 Vue CLI 和 Create React App 轻松创建和管理 Vue.js 和 React 项目。

原创 使用 React 上下文在组件之间共享数据

在这个示例中，我们定义了一个上下文对象和提供器组件，以及一个自定义钩子函数来访问上下文对象的值。通过使用上下文，我们可以避免将数据通过多层组件进行传递，而是直接在需要的组件中访问共享的数据。我们将创建一个示例，展示如何使用上下文来共享一个数据对象，并在需要的组件中进行更新。我们在组件中展示了共享数据的值，并提供了一个按钮来触发更新数据的操作。接下来，我们需要创建一个提供器组件，用于将数据提供给需要的组件，并提供更新数据的方法。现在，我们已经定义了上下文对象和提供器组件，我们可以在需要的组件中使用它们了。

原创 uniapp蓝牙开门

uniapp蓝牙开门。

转载 区块链交互

本文介绍了在React中使用Web3 React库与以太坊交互的基础知识和技巧。我们先介绍了Web3 React的基本用法，包括连接以太坊网络、获取账户信息等。然后，我们介绍了如何使用Web3 React与ERC20合约交互，包括获取合约的Name和Symbol、获取Token余额、转账和授权等。最后，我们介绍了如何使用Web3 React与Uniswap V2交互，包括创建流动池、计算Token的交换量、交换Token、移除流动池和添加流动池等。

原创 使用react + ethers.js通过reacthooks方式完成metamask钱包交互逻辑

在useEffect钩子中，我们使用provider.listAccounts()方法来获取MetaMask中的所有账户，并使用provider.getBalance()方法来获取当前账户的余额。使用ethers.js通过Hooks方式完成MetaMask钱包交互逻辑可以让您的应用程序与以太坊网络进行交互，包括发送和接收以太币、调用智能合约等。注意：在使用MetaMask时，您需要确保用户已连接到正确的网络，并且钱包中有足够的余额来执行所需的操作。在使用ethers.js之前，您需要将其安装到您的项目中。

原创 vue3+ant-design-vue按需加载组件

方法按需批量注册Ant Design Vue组件。使用@import导入Ant Design Vue的样式文件。这样，就可以按需批量注册Ant Design Vue组件了。指令导入Ant Design Vue的样式文件。类，以覆盖Ant Design Vue按钮组件的默认样式。选项来覆盖Less变量。你可以根据需要添加或修改变量。注意：在这里，我们使用组件的名称作为组件标签名。在Vue 3中，你可以使用。在应用程序实例中使用。在这里，我们首先使用。在Vue组件中，使用。

原创 vue3教程

Vue 3是一种流行的JavaScript框架，它用于构建现代Web应用程序。在本教程中，我们将介绍Vue 3的基础知识，并演示如何使用Vue 3构建简单的Web应用程序。

原创 多媒体查询多端适配-scss

【代码】多媒体查询多端适配-scss。

原创 时间戳转换年，月，天，小时，分钟

【代码】时间戳转换年，月，天，小时，分钟。

原创 npm ERR! exited with error code: 128

关键字 git://github.com/adobe-webplatform/eve.git。npm 下载报错 npm ERR!把git设置成htttp。

原创 vue不能在视图进行改变数组操作，会触发死循环

改变数组的操作不能放在vue的视图层

原创 折线图个性化配置

折线图背景渐变 areaStyle: { opacity: 1, normal: { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0,

原创 vscode插件

原创 递归封装js

递归封装js/** * tree数组, tag查找id, resultKey查找id字段 拿到同级id的对象数据 */export function getValue(tree, tag, resultKey,childrenKey) { let result = null; let Presult = null; function recursionFindId(tree, tag) { tree.forEach(item => { console.log(

原创 js递归封装，授权组件

RecursionApi.js/** * tree数组, tag查找id, resultKey查找id字段 拿到同级id的对象数据 */export function getValue(tree, tag, resultKey,childrenKey) { let result = null; let Presult = null; function recursionFindId(tree, tag) { tree.forEach(item => { c

原创 微信公众号定位

系列文章目录通过高德地图坐标转换接口，完成微信wx.getLocation（）jsdk坐标转换，实现定位高精确度效果微信公众号定位系列文章目录前言一、下载高德二、封装地图组件，vantUI三、拖拽组件，vantUI前言一起开始在百度找了坐标转换，腾讯地图转换成百度地图坐标等等方法但是误差还是很多很难搞，后来看高德原生的地图api里面有浏览器精确定位，我就想着搬到微信公众号，但是公司比较穷，用不起https，没办法，只能试试高德坐标转换api希望误差不要太大，结果还是很好的https://

原创 vue动态权限菜单

vue动态权限菜单提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录vue动态权限菜单前言二、使用步骤1.引入组件处理文件RouterFilter2.permission权限路由处理后台返回用户信息3.首页菜单页面前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考二、使用步骤1.引入组件处理文件Route

原创 实现Office文档的在线查看等功能

使用微软提供的Office Online平台只需要一个网址即可在线查看Xls,doc,PPT等文档http://view.officeapps.live.com/op/view.aspx?src=要查看的文档地址查看docx文档：http://view.officeapps.live.com/op/view.aspx?src=newteach.pbworks.com%2Ff%2Fele%2Bn...

转载 Echarts

Echarts数据可视化action图表行为的相关操作，开发全解+完美注释//触发图表行为（更改变图表显示的相关动态），例如图例开关legendToggleSelect, 数据区域缩放dataZoom，显示提示框showTip等等//通过不同的type触发不同的行为myChart.dispatchAction({ type: 'highlight', //高亮指定...

原创 v-charst环图默认显示数据

封装组件只能用ref做class标识，原生的echars是用id做标识,设置默认选中高亮部分用dispatchAction方法<template> <div> <ve-ring :settings="chartSettings3" :extend="percentExtend" height="280px" ref="chart_ring" :data...

原创 ant V版本登陆权限

这里写自定义## 标题目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢...