- 博客(149)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 mapboxgl 中给地图添加遮罩蒙版，并不遮罩其中一块区域
本篇文章主要是给一整块地图添加遮罩层蒙版，但是不遮罩其中一个区域，以反向高亮地区内容。GanSuBounds是甘肃省内市州级边界json。NationBounds 是全国省级边界json。反向思维，遮罩全部，抠出部分即可。
2023-12-27 09:57:13
660
原创 mapboxgl 中热力图的实现以及给热力图点增加鼠标移上 popup 效果
注意：因为热力图本身不可以添加鼠标以上效果，所以还是使用了点，将鼠标以上效果加给点，然后把点的透明度设置为0，大小和热力图中点相同，即可完成上图中效果。注意：vue中引入图片要使用require引入，路径不能以传参的形式传入，最好写相对路径。本篇文章还是关于最近做到的 mapboxgl 地图展开的。本方法主要还是使用点和热力图重叠同时显示效果。
2023-12-27 09:40:43
982
原创 关于 mapboxgl 的常用方法及效果
经过验证，上述文章中选取了方法三，自定义去切割圆。方法二可能有问题，没有尝试。我的写法估计是有点问题，每条小线段都增加了一个资源和图层，但是还是实现了此功能。思路：画圆，其实就是连接n个近似于圆的点位。实现效果：（颜色自行修改）此方法用于卡车图标动态移动。
2023-12-06 15:16:32
849
原创 关于 MapboxGL 在 Vue 中的简单使用
关于 Vue-iClient-MapboxGL 的使用注意事项网上提供的比较多，但是我这里使用的是， 以及mapboxgl中的 api。以上方法均为不完成代码示例，若有需要可直接留言！特总结思路。
2023-10-31 11:14:45
300
转载 超详细讲解H5移动端适配 —— 前置知识
移动互联网发展至今，各种移动设备应用而生，但它们的物理分辨率可以说是五花八门，一般情况UI会为我们提供375尺寸的设计稿，所以为了让H5页面能够在这些不同的设备上尽量表现一致，前端工程师就不得不对页面进行移动端适配了。
2023-10-30 15:31:43
245
原创 怎样使绝对定位的元素宽度自适应子元素
在一个大屏展示页面中，使用了全局绝对定位，元素相对于父元素（全局）进行绝对定位，元素气泡描述再次使用了绝对定位，气泡相对于元素进行绝对定位。气泡描述有两行数字描述，需要自适应宽度。
2023-10-30 10:02:36
176
原创 关于 Vite 的浅显学习 - 功能 - TypeScript
大部分内容来源于vite官网，部分内容来自于 自己测试和总结对非常基础的使用来说，使用 Vite 开发和使用一个静态文件服务器并没有太大区别。然而，Vite 还通过原生 ESM 导入提供了许多主要用于打包场景的增强功能。
2023-10-10 11:40:48
144
转载 推荐10个Vue 3.0开发的开源前端项目
Vue 是一款用于构建用户界面的 JavaScript 框，它基于标准 的HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，用以帮助开发者高效地开发用户界面。目前，Vue 3.0正式版也发布了两年的时间，越累越多的开发者也用上了Vue 3.0。对比Vue2.x，Vue 3.0在性能提升了1.3~2倍左右，打包后的体积也更小了，同时Vue 3.0还提供了更好的TypeScript支持和渲染器。今天，就来给大家分享 10 个基于 Vue3.0开发的开源项目。
2023-10-07 17:31:02
2261
原创 关于 Vue-iClient-MapboxGL 的使用注意事项
最后选择了全局引入，但是全局引入把我系统原有的一些默认未修改样式覆盖掉了，搞的样式错乱，最后又重置排列了引入这个库样式和reset样式的顺序来修复此问题。也可能是我研究不清楚，愿有心人留下地址，供我学习！关于图的使用，其余的引入步骤不再赘述，仅说注意事项。推荐使用的是全局引入，也就是完整引入。因为单独引入我踩了不少坑，比如说。
2023-10-07 17:00:44
806
转载 CSS 2022 新特性
允许给 @media 自定义名称了，如下定义了很多自定义 @media：: root {… } }CSS 2022 新特性很大一部分是将 HTML 原生能力暴露出来，赋能给业务自定义，不过如果这些状态完全由业务来实现，比如 Antd组件早已实现自定义下拉选项与样式，既然 HTML 没有提供自定义能力，就按照其交互用 DIV + JS 模拟一套实现出来，定制空间更大。
2023-01-16 17:09:30
266
1
转载 大文件怎样实现快速上传？
转载自：前端大全大文件快速上传的方案，相信你也有过了解，其实无非就是将 文件变小，也就是通过 压缩文件资源 或者 文件资源分块 后再上传。本文只介绍资源分块上传的方式，并且会通过 前端（vue3+ vite） 和 服务器 （nodejs + koa2） 交互的方式，实现大文件分块上传的简单功能。Q1：谁负责资源分块？谁负责资源整合？A1：当然这个问题也很简单，肯定是前端负责分块，服务器负责整合。Q2：前端怎么对资源进行分块？A1：首先是选择上传的文件资源，接着就可以得到对应的文件对象 ，而 方法可以实
2022-06-17 14:18:15
214
原创 关于 vue-seamless-scroll 的问题采坑
标题# 项目场景：本文描述了在引用 vue-seamless-scroll 的过程中遇到的一些常见问题问题描述此插件在使用的过程中如果条数过少，要阻止循环滚动，不能够持续复制滚动原因分析此问题主要是因为插件自动复制了我们的一个列表，两个列表持续滚动，如下图所示解决方案给 class-option 的属性增加 limitMoveNum设置成动态的，且根据何时显示何时初始化，因为我的页面里是个弹框，刚开始就初始化数据的话，滚动循环会不规律动态设置 limitMoveNumlimitMov
2022-04-22 09:35:07
3829
转载 总结了 42 种前端常用布局方案（三）
转载自：前端大全三列布局三列布局主要分为两种：第一种是前两列定宽，最后一列自适应，这一种本质上与两列布局没有什么区别，可以参照两列布局实现。第二种是前后两列定宽，中间自适应，最终效果图如下公共 CSS 如下：body { margin: 0;}.container { height: 400px; background-color: #eebefa;}.left { height: 400px; width: 200px; background-co
2022-03-14 17:27:30
176
转载 总结了 42 种前端常用布局方案（二）
转载自：前端大全水平垂直居中实现水平垂直布局基本就是将上面几种方式结合使用，这里总结了 7 种常用的布局方法，其公共的 CSS 代码如下所示：body { margin: 0;}.parent { height: 500px; width: 500px; background-color: #eebefa; margin: 0 auto;}.child { height: 300px; width: 300px; background-color: #f783a
2022-03-14 17:01:21
112
转载 总结了 42 种前端常用布局方案（一）
转载自：前端大全对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。本篇文章总结了 42 中 CSS 的常见布局，这 42 种布局可以细分为如下几类：水平居中垂直居中水平垂直居中两列布局三列布局等分布局Sticky Footer 布局全屏布局这些内容也正是本篇文章的目录。水平居中实现水平布局比较简单，方法也比较多，这里总结了 7 种常用的布局方法，其公共的 CSS 代码如下所示：.parent {
2022-03-14 11:09:58
201
原创 微信小程序车牌号输入组件（虚拟键盘）
本文参考 微信小程序中实现车牌输入功能， 进行了更加细致的键盘划分、删除等功能文中给出代码都是截图，完整代码在文末贴出。组件效果组件功能：其中虚拟键盘、新能源车牌等功能均可使用封装成一个组件可以直接 Import 使用可以给定默认初始值（如 gif 中所示）父组件通过 change 事件可以监听到车牌号每一次的变化组件部分样式也可以给定 class 来自定义可以规范用户输入车牌号，防止乱输引起的数据库错乱组件思路根据车牌号的规则，根据不同的第几位生成键盘例如：第一位为省.
2021-12-03 14:39:43
6082
4
原创 关于支付宝小程序在 安卓机（米10） 倒计时问题
问题描述要在进入页面开始倒计时，倒计时十秒之后显示阅读完成，请看下面视频描述IOS 手机测试是没有问题的，用我自己的手机 （米10）测试就出现了这个问题注意：代码中设置的都是 10s 倒计时，为了测试 我刚开始设置了 test，只从页面来看，感觉倒计时是从 6s 开始了问题解决过程尝试一： 我 console 了 time 是否设置成功console 出来的结果是没问题的，由此可见是渲染的问题，不是 写的倒计时方法有问题但是，渲染的时候用的都是最简单的 this.setData 也能con
2021-10-19 10:57:13
484
转载 微信 H5 页面前端开发，大多数人都会遇到的兼容性“坑”
转载自：前端大全作者：codercaohttps://segmentfault.com/a/1190000019986963最近给公司写了微信 h5 业务页面，总结分享一下前端开发过程中的几个兼容性问题，项目直接拿的公司的页面，所以下文涉及图片都模糊处理了。IOS 端兼容 input 光标高度**问题详情描述：**input 输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是 ios 的 input
2021-10-19 10:36:43
433
转载 捕获用户在该页面停留的时长（前端监测）
转载自： 前端大全前言：为什么要做这个监测用户停留的呢？原因很简单，如果我们要分析这个页面对我们的产品有没有价格，那么用户浏览的时长是一个很关键的点，如果每个用户每天都在这个页面停留两个小时以上，那么我们会觉得这个页面的价值很高；如果一个页面一个月也没几个用户去浏览，那我们就会有疑问，这个页面对我们的产品还有价值吗？我们的产品后续还要保留它？这些需求都是可以让我们考虑是否要去获取用户停留时长这个功能的。针对哪些应用？多页面应用单页面应用（本文以vue为例子）如何去获取用户停留的时长？在监
2021-10-14 16:58:25
1961
原创 关于在 Vue 项目中使用滑块校验 vue-puzzle-verification
老规矩，官网链接 https://github.com/he4398/vue-puzzle-verification基本操作使用npm 下载cnpm i vue-puzzle-verification在使用的页面中引入<!-- 滑块校验 --><van-popup v-model="isVerificationShow" style="border-radius: 16px"> <div class="login-box"> <div cl
2021-08-23 09:54:57
605
原创 关于 vue 项目保存时报没有权限问题
问题描述整个down的过程都是正常步骤，并且也能正常启动项目但是我在页面里不管编辑什么 ctrl+s 保存一下就报错，服务就停止了好，我们百度尝试一下怎么解决失败方案复制到百度中，百度说是因为咱cnpm install 的时候没有用管理员权限运行好，我们就用管理员运行一下但是结果还是一样的，一直报错正确方案我们由保存就报错停止猜想，肯定是写入的时候被什么阻止了，然后咱的项目就被停掉了同时，我尝试了 n 个方法，重启项目时发现了一个被翻页了的报错因为自动翻页了就被忽略了，好，我们
2021-08-18 16:53:28
1481
原创 关于vue中使用indexDB的总结
老规矩，先挂官网链接https://www.npmjs.com/package/idb-js关于indexDB 是什么，用到什么地方我就不再解释，百度多得很，只说我在使用的过程中的一些问题官网解释：引入及简单使用安装：npm install idb-js --save使用：第一步：引入dbimport Idb from 'idb-js' // 引入Idb第二步：引入数据库配置import db_student_config from './db_student_con
2021-08-16 11:05:23
3258
转载 Vue.js 最佳实践
转载自：前端大全作者：zach5078segmentfault.com/a/1190000014085613本文面向对象是有一定 Vue.js 编程经验的开发者。对大部分人来说，掌握 Vue.js 基本的几个 API 后就已经能够正常地开发前端网站。但如果你想更加高效的使用 Vue 来开发，成为 Vue.js 高手，那么下面的五招一定得认真学习一下。化繁为简的 Watchers场景还原：created(){ this.fetchPostList()},watch: {
2021-07-22 09:33:30
116
转载 CSS 变量由浅入深，提升效率必备知识！
文章来自于：前端大全CSS 变量（又名自定义属性）已在 WEB 浏览器中支持了近四年。我一般也会根据项目情况使用它们。它们非常有用且易于使用，但是前端开发人员通常可能会误用或误解。简介CSS 变量是在 CSS 文档中定义的值，其目的是可重用性并减少 CSS 值中的冗余。下面是一个基本示例。.section { border: 2px solid #235ad1;}.section-title { color: #235ad1;}.section-title::before {
2021-06-22 16:59:42
226
原创 vue-quill-editor 的使用方法
官方文档：https://www.npmjs.com/package/vue-quill-editorgitHub地址：https://github.com/surmon-china/vue-quill-editor参考地址：https://www.jianshu.com/p/a6cba69d6e49安装依赖cnpm install vue-quill-editor --save引用方式全局引用，项目入口文件中（main.js）注册import Vue from 'vue'impo.
2021-06-01 10:15:24
10069
1
转载 JavaScript 中哪一种循环最快呢？
转载自：前端大全了解哪一种 for 循环或者迭代器适合我们的需求，防止我们犯下一些影响应用性能的低级错误。循环一直是大多数编程语言的重要组成部分，而现代 JavaScript 为我们提供了许多迭代和循环值的方法。但问题在于，我们是否真的知道那种循环或迭代最适合我们的需求。for 循环有很多变形，例如 for、for（倒序）、for…of、forEach、for…in、for…await。本文将围绕这些展开讨论。究竟哪一种循环更快？答案其实是： for（倒序）最让我感到惊讶的事情是，当我在本地计算
2021-05-27 11:20:43
142
原创 常用方法总结
关于es6中的函数 发现在日常工作中也是常用项，但是老是记不住，老要百度，特总结一下判断是否包含此方法不仅对 字符串生效，同样对数组也生效，对象数组不生效（仅为测试）let str = '123456'let str1 = '01'let str2 = '12'console.log(str.includes(str1)) // falseconsole.log(str.includes(str2)) // truelet arr = [1, 2, 3, 4]console.log(arr
2021-05-25 17:26:47
83
原创 关于 flex 布局在日常工作中的使用
前端人员大部分其实觉得样式贼简单，感觉JS才有挑战性，忽略了样式的重要性，导致写出来的页面适配性不高。其实现在常用的比较好的布局为 flex 和 grid。工作过程中，发现好多人依旧在布局的过程中死磕 position 和 float，导致页面换了分辨率就掉下来，或者就乱掉了。所以总结一下我经常在工作中常用的一些 flex 布局的用法，也是为了不用每次用到都要打开阮一峰的博客来搜索。这里也并不是说哪种好哪种不好，只是要灵活使用，不能死磕！！！（若总结出错可联系博主，仅用于学习交流）先放.
2021-04-30 10:46:34
279
1
转载 帮你彻底搞懂 JS 中的 prototype、__proto__与constructor（图解）
转载自：前端大全前言作为一名前端工程师，必须搞懂 JS 中的 prototype 、 __proto__ 、constructor 属性，相信很多初学者对这些属性存在很多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点， __proto__ 属性的两边是各自两条下划线构成（这里为了大家看清，在两下划线之间加入了一个空格： _ _proto_ _ ，读作“dunder proto”，“double underscore proto”的缩写），实际上，该属性在 ES 标
2021-04-19 15:32:54
322
转载 Vue 中避免滥用this去读取 data 中的数据
转载自 前端大全 ，侵联删！前言在 vue 中，data 选项是个好东西，把数据往里一丢，在一个 vue 组件中任何一个地方都可以通过 this 来读取 data 中数据。但是要避免滥用 this 去读取 data 中数据，至于在哪里要避免滥用，如果滥用会导致什么后果，本文将会一一揭晓。一、用 this 读取 data 中数据的过程在 vue 源码中会把 data 中数据添加 getter 函数和 setter 函数，将其转成响应式的。getter 函数代码如下所示：function reacti
2021-03-29 14:21:15
677
转载 你真的了解 ES6 中的函数特性么？
以下文章来源于 前端娱乐圈，作蛙人仅用于学习交流，侵联删！前言函数是所有编程语言中重要的组成部分，在 ES6 出现之前 JavaScript 的函数语法一直没有太大的变化，从而遗留了很多问题和隐晦的做法，导致实现一些功能需要编写很多代码。函数形参默认值JavaScript 函数有一个特别的地方，就是无论在函数形参里定义了多少参数，都可以传入任意数量的参数，但是有的情况下，我们的参数只是可填，这样的话我们还在函数体内些一堆逻辑从而导致代码冗余，还好 ES6 版本出现了函数默认值。我们用 ES5 和
2021-03-17 14:53:21
168
转载 基于原生 JS 构建超级玛丽游戏
以下文章来源于 掘金开发者社区，作者其枫仅用于学习交流，侵联删！写在前面本文将会手把手带着大家完成一款别样的超级玛丽游戏。线上地址：http://139.196.82.33:8089/该游戏一共有 5 关，欢迎在评论区交流！介绍游戏界面大致如下：黑色的小方块代表的是玩家，他的任务时手机关卡内所有的金币同时需要避开岩浆。当最后一个金币被收集到了之后，这一关就通过了。如何操作？玩家通过键盘上下左右键进行移动。好，那么接下来我们就开始我们的游戏之旅吧！建模定义关卡首先我们需要用一种方式
2021-03-15 11:15:01
685
1
原创 软考—信息项目管理师（项目范围管理三）
摘录自：信息系统项目32小时通关（仅用于学习交流，侵权删！）创建工作分解结构（WBS）基础知识点创建 WBS 是将项目可交付成果和项目工作分解成较小的、更易于管理的组件的过程，其主要作用是对所有交付的内容提供一个结构化的视图。里程碑标志着某个可交付成果或阶段的正式完成。重要的检查点是里程碑、重要的里程碑是基线。工作报告是位于 WBS 每条分文最底层的可交付成果获项目工作组成部分，工作包应该非常具体，以便承担者能明确自己的任务、努力的目标和承担的责任。工作包的大小需要遵循 8/80 原则。控制账
2021-03-05 16:48:56
1572
原创 软考—信息项目管理师（项目范围管理二）
摘录自：信息系统项目32小时通关（仅用于学习交流，侵权删！）收集需求基础知识点收集需求是为实现项目目标而确定、记录并管理干系人的需要和需求的过程，起作用是为定义和管理项目范围（包括产品范围）奠定基础。需求的分类：（1）业务需求：整个组织的高层级需要，如解决业务问题或抓住业务机会，以及实施项目的原因。（2）干系人需求：是指干系人或干系人群体的需要。（3）解决方案需求：是为满足业务需求和干系人需求，产品、服务或成果必须具备的特性、功能和特征。解决方案需求又进一步分为功能需求和非功能需求。功能需求
2021-03-05 11:23:43
456
1
原创 软考—信息项目管理师（项目范围管理一）
摘录自：信息系统项目32小时通关（仅用于学习交流，侵权删！）考点分析 本章节主要学习项目范围管理知识，主要涉及项目范围管理的六个过程：规划范围管理、手机需求、定义范围、创建工作分解结构、确认范围、控制范围等内容。 根据考试大纲，本章节会涉及单项选择题、案例分析题、论文写作题，其中单项选择题约占 2~4 分，案例分析题属于常考重点考点，论文也是常规出题领域之一，这部分内容侧重于理解掌握。
2021-03-03 15:16:50
415
1
faceDistinguish.zip
2020-03-24
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人