小志哥斯拉-优快云博客

原创 js防抖函数防抖无效的解决方法

参数接收：使用剩余参数...args接收所有传入参数上下文保存：通过闭包保存this上下文，避免箭头函数导致的上下文丢失参数传递：使用apply()方法同时传递上下文和参数数组实例保持：确保事件处理器中始终调用同一个防抖函数实例

2025-04-02 08:32:31 112

原创 leaflet使用什么坐标系、加载不同地图是否需要进行地图纠偏等问题总结

使用不同图商的底图时，地图拾取的坐标是哪个坐标系的？是否需要进行地图纠偏？这方面文档也没有过多的解析

2025-03-06 16:45:44 342

原创 JavaScript方法，处理量特别大的纬度轨迹数据量，均匀减少坐标点

上述代码中，getDistance函数用于计算两个经纬度坐标点之间的距离（使用了Haversine公式），reducePointsByDistance函数则根据距离阈值来减少坐标点。当轨迹数据比较复杂，等间隔采样可能会丢失重要信息时，可以根据两点之间的距离来采样。例如，设定一个距离阈值，当相邻两点的距离小于这个阈值时，就删除其中一个点。这种方法是按照固定的间隔选取坐标点。例如，如果有1000个坐标点，但你只需要100个，那就每隔10个点选取一个。

2024-12-20 11:32:35 267 1

原创 vue3按需引入element-plus并修改主题颜色

新建文件styles/element/index.scss，修改element主题色&全局预定义scss变量就在这个文件。

2024-08-28 11:03:08 428

原创 vue2父组件向子孙组件响应式传参，provide/inject响应式

provide和inject一起使用，实现将父组件的数据、方法提供给子孙组件使用，不论组件层次有多深。provide和inject绑定并不是可响应的。但如果你传入了一个可监听的对象，那么其对象的property还是可响应的。1、传入一个可监听的对象。2、传入函数的方式传参。

2024-08-16 20:11:04 902

原创 Linux学习笔记（二）

linux系统很多软件支持使用systemctl命令控制启动、停止、开机自启systemctl start | stop | status | enable | disable 服务名

2024-07-13 16:07:26 367

原创 Linux学习笔记（一）

命令格式command [-options] [parameter]command：命令名，相应功能的英文单词或单词的缩写[-options]：选项，可用来对命令进行控制，也可以省略parameter：传给命令的参数，可以是零个、一个或者多个

2024-07-05 22:23:47 582

原创 element-ui input 输入框赋值后，无法再输入的问题解决

初始值form的属性没有定义，后续直接给form添加属性并赋值，vue没有监听到form值变化，输入选项就没有重新渲染，所以出现无法输入（实际已赋值）。

2023-11-01 08:38:37 3454

转载 js获取一段时间内的工时，排除去周末、非工作时间

js获取一段时间内的工时，排除去周末、非工作时间需求：每天8小时, 上午8:00~12:00, 下午13:00~17:00 (排除周六、周日)。

2023-10-26 16:23:15 627

原创 echarts自动轮播tooltip

1. 将自动轮播的工具函数封装到 utils/echart-tooltip-carousel.js。2.在vue3中使用的示例。

2023-08-10 08:30:00 723 2

原创 quill 富文本编辑器 @提及

3. 在vue2中使用的示例，已省去无关代码。(示例来自自行封装的Quill.vue通用组件)无论哪个示例，记得引入css样式。在源码的 dist/quill.mention.css。使用插件quill-mention实现在quill 富文本编辑器使用@或#提及用户。

2023-08-09 17:20:37 1520

原创当一个 form 元素中只有一个输入框时，在该输入框中按下回车提交表单，并阻止默认的表单提交

当一个 form 元素中只有一个输入框时，在该输入框中按下回车，会默认提交该表单，导致刷新整个页面。而需求是不可以刷新页面，而是异步提交表单。监听输入框的回车事件 @keydown.enter.native="shipContainerBill"，自行提交表单。W3C 标准: 当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。加上 @submit.native.prevent 阻止form表单默认提交事件。

2023-06-08 08:32:08 473

原创 element-ui table 列渲染错乱

当table表格通过v-if配置是否显示列，且列的数量过多时（大概10列以上），就会出现渲染混乱。(例如：页面组件是缓存的keep-alive，首次渲染表格没问题。但是切换到其他组件再切换回来时，表格列就会出现错乱。通过v-if控制表格的列是否展示，每列通过showColumn函数检查用户的配置，返回true或false（是否显示该列）。每一列添加唯一key属性值，问题解决。

2023-04-23 16:45:37 666

原创用vue做一个音乐播放器

开源协议MIT Licensegithub: https://github.com/huangweizhi/xz-music.gitgitee: https://gitee.com/weizhihuang/xz-music.git使用了开源的网易云音乐 NodeJS 版 APIvue全家桶 vite + vue3 + vue-router4 +pinia2

2023-03-15 17:00:43 753

原创 element-ui table 设置表格滚动条位置

在切换不同页面时（被 keep-alive 缓存的组件间切换），页面中的element-ui table的滚动条位置没有停留在原来的位置。目前需要切换不同的页面返回来后，滚动条保持在原来的位置。

2023-03-01 08:32:26 5070

原创 Vue history模式路由部署到二级目录配置

增加一个环境变量VUE_APP_BASE_URL，将环境变量VUE_APP_BASE_URL值设为 '/cms'。3.1 改为hash模式路由，将router mode配置注释掉。3.2 修改网站目录，对应修改VUE_APP_BASE_URL。修改publicPath（打包后公共资源文件访问路径）。示例：部署到二级目录/cms。2、vue2项目配置。

2023-02-15 12:22:04 1254

原创 nginx代理匹配的上下文路径是否带走

，域名+端口后面不带 / 则带走上下文路径，主域名后面带 / 则不带走上下文路径。location匹配路径，而匹配的上下文路径是否带走主要看proxy_pass。），相当于域名+端口后面带了 / ，所以不带走上下文路径。(不带走上下文路径)(不带走上下文路径)(不带走上下文路径)

2023-02-10 12:05:40 842

原创 OBS华为云对象存储签名计算

OBS提供的SDK已集成了签名计算，建议您使用SDK进行开发。但是在没有提供对应SDK的场景下（小程序），这时候就要自行计算。以Header中携带签名为例，计算得到签名（Header中携带签名、URL中携带签名。基于浏览器上传的表单中携带签名。OBS根据应用场景，提供了。）后，返回签名头域（

2023-02-07 12:35:36 1055

原创微信小程序页面wxml中使用wxs，实现“过滤器”功能（处理页面中的数据）

WXS（WeiXin Script）是小程序的一套脚本语言，结合。，可以构建出页面的结构。

2022-12-09 11:07:24 1411

原创 Promise.all()统一处理未知数量的Promise实例(遍历生成)

Promise.all()统一处理未知数量的Promise实例(遍历生成)

2022-11-24 17:00:39 580

原创微信小程序检测、更新版本，版本更新管理器wx.getUpdateManager()

解决：可以使用版本更新管理器wx.getUpdateManager()，在每次进入小程序时执行一遍版本更新的检测。问题：小程序发布后（全量发布），若用户不是首次打开小程序，可能会出现不能立即更新到最新版本的情况。全部代码如下噢，和官方文档的示例差不多，/app.js。

2022-11-18 14:02:55 1756

原创解决vue-router4缓存页与不缓存页切换失效的问题

路由配置中，name要唯一且和组件名称要相同，否则缓存无效。keepAlive用于说明该组件是否缓存。这样会存在一个问题，当从缓存页切到不缓存页，再从不缓存页返回到缓存页时，缓存失效，缓存页会重新加载。还是按照官方的方法来吧，使用include属性。

2022-10-14 09:52:29 1847 1

原创 vue-devtools安装（v6.4.1）

导入devtool插件的路径是 D:\HBuilderProjects\devtools-6.4.1\packages\shell-chrome。4.4、选择文件夹 D:\HBuilderProjects\devtools-6.4.1\packages\shell-chrome。3、我的项目所在地址是 D:\HBuilderProjects\devtools-6.4.1。2、下载并解压到本地后，在项目根目录运行。4.1、右上角点开更多程序-扩展程序。4.3、加载已解压的扩展程序。4.2、打开开发者模式。

2022-09-28 10:29:06 1090

原创将nuxt.js项目部署到域名二级目录下

6.2、打包后正常是将如下四个文件/夹复制到服务器对应目录下，如果有自定义的中间件服务，也要一起复制过去。引入了外部(static目录下)的css、js，或者是使用了axios，需要同步修改相对应的配置。6.3、在服务器对应目录下，运行npm install 安装依赖，npm start 启动项目。2、先配置用于区分开发环境(dev)和生产环境(prod)的env变量，参考我的文章。说明一下：配置router即可实现变更应用的根URL，例如像下面的配置，项目将运行在。6、部署到域名下的二级目录。

2022-09-25 12:30:09 3222

原创 nuxt.js中使用cross-env配置env环境变量

也可以添加多个变量，例如：cross-env NODE_ENV=prod baseURL=http://localhost:3100 nuxt build。在需要的脚本之前加入 cross-env NODE_ENV=dev ，表示执行该脚本时，添加env环境变量NODE_ENV（变量名），dev(值)。process.env.NODE_ENV 或 context.env.NODE_ENV。4、配置完成，现在可以通过两种方式访问env环境变量。3、在nuxt.config.js添加如下配置。

2022-09-25 10:15:31 2425 4

原创 js实现表格按行滚动

3、滚动控制：为了实现按行滚动，需要拿到div表格的每一行的高度，然后定时、逐行执行滚动（即对tbody滚动高度值定时进行累加，每次累加表格行的高度，然后tbody的style属性的top取滚动高度值的负值）。1、表格模仿table的结构，使用div元素构建，其中在tbody外包了一层div(tbody-container)，以便对超出tbody-container的内容进行隐藏。最近又有同样的需求，不过是vue项目，所以又做了一个基于 js实现的表格按行滚动，原理相同。优化了表格内容见底后即滚回顶部。

2022-09-02 11:12:18 3067

原创 react-native-navigation 实现底部导航栏布局（Android）

应用中的每个屏幕组件都必须使用唯一的名称进行注册，Navigation.registerComponent()。1、在react-native项目中安装react-native-navigation。2、导航组件注册及配置文件src\navigation\index.js。RN 0.60 或更高版本，可以通过自动链接来执行必要的配置，运行。3、更改入口文件index.js。示例项目安装的模块的版本。...

2022-08-29 11:23:23 1683 2

原创 Vue 高德地图输入提示和POI搜索插件结合使用拾取对应地点坐标

7、效果：在搜索框输入地点名称，产生输入提示，点击某个提示选项后，进行POI搜索，地图会自行标记出搜索地点。点击地图任意位置，或者POI搜索结果的marker，都会拿到相对应的坐标。4、JSAPI 的加载：这里使用官方文档推荐的方式，使用 JSAPI Loader ，并按 NPM 方式使用 Loader。1、准备好高德地图的key和安全密钥jscode，key的平台类型是Web 端 ( JSAPI )。如上述代码，在配置文件中设置安全密钥，这样只要外部引用key就会执行设置安全密钥的代码。...

2022-08-26 11:24:51 5647 13

原创 react-native-vector-icons的使用（android）

示例中：react-native版本0.66.4 react-native-vector-icons版本9.2.0。2、在文件android\app\build.gradle中添加如下代码。

2022-08-10 20:52:48 1028

原创 react-navigation的使用，实现app底部导航栏

配置文件android/app/src/main/java//MainActivity.java。修改app/nav/Nav.js，options添加tabBarIcon属性，它接收一个函数返回reactnode。Android需要进行如下配置。6、icon图标的引入(使用。1、在项目中安装所需的包。3、将整个应用程序包在。4、封装一个导航组件。......

2022-07-27 16:26:57 2334

原创在element-ui menu组件基础上，封装一个动态侧边菜单栏组件

组件由两个文件构成，都放在了Sidebar目录下，分别是index.vue和SideItem.vue，使用时直接引入index.vue即可。菜单栏数据从路由表获取，示例中通过mapGetters从store中获取permission_routes。在不考虑权限时，这些数据可以直接从router/index.js文件引入，permission_routes是根据登录用户权限筛选后的路由。示例中路由表的数据格式如下：菜单栏组件逻辑：菜单栏由el-menu整体包裹，可展开的菜单项由el-submenu包裹，

2022-07-12 20:58:57 1841 2

原创 vue-i18n 插件实现国际化，支持切换不同语言

文档https://kazupon.github.io/vue-i18n/zh/started.html 1、安装依赖包vue-i18n$ npm install vue-i18n --save2、国际化相关的代码都放在项目的src/lang目录下src/lang/en.jssrc/lang/zh.jssrc/lang/index.js如果项目使用了element ui，element ui也需要进行国际化，它可以与 vue-i18n 搭配使用实现多语言切换https://element.ele

2022-07-07 20:28:26 778

原创在 Vue.js 中使用 Font Awesome

官方文档https://fontawesome.com/docs/web/use-with/vue/1、安装核心包：npm i --save @fortawesome/fontawesome-svg-core2、安装Font Awesome Vue组件:Vue 2.xnpm i --save @fortawesome/vue-fontawesome@latest-23、按需安装图标包：免费图标npm i --save @fortawesome/free-solid-svg-iconsnpm i --

2022-06-23 11:16:39 603

chrome浏览器vue-devtools插件v6.4.1

空空如也