- 博客(32)
- 收藏
- 关注
RSS订阅原创 【Vue3】浅谈setup语法糖
Vue3 的 setup 语法糖是通过 <script setup> 标签启用的特性，它是对 Composition API 的进一步封装，旨在简化组件的声明式写法，同时保留 Composition
2025-02-28 18:59:11
850
原创 【算法】小C的菜品选择：每日一问之今天吃什么！[特殊字符]️
算法相对来说一直是我这个前端崽的薄弱项，趁有时间正好可以刷掘金的。，作为一个资深吃货，这不就来了动力！让我们一起来为小C选出花最少的钱，吃最心头好的菜。🍽️。
2025-02-28 09:38:10
372
原创 【uni-app】微信小程序使用lime-painter生成海报
是一个专为 UniApp 设计的插件，用于优雅地生成海报，并支持下载海报图片。它支持在多个平台中使用，并且提供了盒子、文字、图片、二维码等配置选项，允许开发者根据项目需求按照UI设计稿对海报进行高度还原。本文将介绍如何使用插件在 UniApp 中实现海报的生成及下载。技术栈：uni-app、Vue3（3.4.21）、TypeScript（4.9.5）、wot-design-uni（1.2.26）、UnoCSS（0.58.9）、pyh-nv运行环境：微信小程序。
2024-12-30 18:10:48
1418
原创 【自适应】postcss-pxtorem适配Web端页面
在进行页面开发时，自适应设计是一个关键的考虑因素。为了实现这一点，是一个非常有用的工具，它可以将CSS中的px单位转换为rem单位，从而实现基于根元素字体大小的自适应布局。下面介绍一下在项目中如何引入并配置postcss-pxtorem。
2024-12-18 22:00:00
268
原创 【uni-app】微信小程序引入lime-echart并使用
在进行微信小程序开发时，发现并不能像Web端使用ECharts那样直接安装依赖包，需要另辟蹊径。在这里介绍其中一种方式--在插件市场引入。该插件兼容性较好，能基本满足小程序的图表开发了。
2024-12-17 16:06:13
702
2
原创 【Element Plus】树形控件懒加载+检索
对树数据进行关键词检索，但是由于数据比较多，一次性渲染数据会导致组件崩掉，因此上一个前端是通过展开树节点逐级查询。Fine。但是el-tree-select组件提供的filter-method或filter-node-method检索方法对懒加载方式无用，它是针对已有节点的检索，即使重新赋值data也不起作用。因此需要自己造轮子实现需求。
2024-12-13 17:40:52
422
原创 【自定义指令】debounce解决快速点击导致重复触发问题
在项目开发中，点击按钮提交表单是比较常见的需求，在某些情况下，用户可能会快速连续触发同一个事件，这可能导致不必要的重复操作或性能问题。为了解决这个问题，我们可以使用防抖技术（确保函数在一段时间内只执行一次）。像后台管理系统有多个页面用到，因此我们可以封装为指令。技术栈：Vue（3.5.12）、TypeScript（5.1.6）、Element Plus（2.8.8）、UnoCSS（0.55.2）
2024-12-13 16:41:59
323
原创 【uni-app】微信小程序定位授权与指引
在微信小程序开发中，获取用户的地理位置是一项常见需求。出于隐私和安全的考虑，微信小程序需要经过用户授权才能获取其位置信息。本文将介绍微信小程序的定位授权功能。技术栈：uni-app、Vue3（3.4.21）、TypeScript（4.9.5）、wot-design-uni（1.2.26）、UnoCSS（0.58.9）
2024-12-11 18:00:32
695
原创 【uni-app】微信小程序获取用户头像、昵称
微信小程序获取用户头像、昵称是比较常见的需求，之前是授权一键获取，后面官方改成分别获取了，在这里记录一下其用法。技术栈：uni-app、Vue3（3.4.21）、TypeScript（4.9.5）、wot-design-uni（1.2.26）、UnoCSS（0.58.9）
2024-12-10 18:46:28
2709
原创 【uni-app】pyh-nv插件自定义导航栏
pyh-nv 是一个专为 UniApp 设计的插件，用于创建和自定义导航栏。它提供了丰富的自定义选项，允许开发者根据项目需求对导航栏进行高度定制化，比如修改颜色、大小、图标以及添加自定义按钮等。本文将介绍如何使用 pyh-nv 插件在 UniApp 中实现一个自定义导航栏。
2024-12-05 18:20:29
363
1
原创 【微信小程序】仿小红书轮播图
小红书是一款受欢迎的生活方式分享平台，用户可以通过分享图片和视频记录生活点滴。本文将基于uniapp(vue@3.4.21(typescript@4.9.5))的微信小程序开发，实现类似查看图片轮播的体验，并分享一些开发中的关键点和注意事项。
2024-12-04 18:22:55
455
原创 【UnoCSS】在项目中的引入&使用
是一个即时（on-demand）的原子化CSS引擎，它的设计灵感来源于Windi CSS和Tailwind CSS，但在性能和灵活性上进行了大幅优化。UnoCSS的核心理念是根据你在模板中的类名，动态生成CSS，避免了不必要的全局CSS加载。本文将介绍如何在Vue3+Vite+TypeScript项目中引入并使用UnoCSS主题。
2024-12-03 23:33:56
1476
原创 【UnoT】VSCode插件高效转换样式为UnoCSS类名
随着原子化CSS工具的兴起，UnoCSS作为一种新的解决方案，正逐渐被广大开发者所接受。它提供了一种灵活而高效的方式来管理和使用CSS样式。本文将介绍如何使用VSCode插件UnoT将传统CSS样式转换为UnoCSS类名，让开发者更专注于实现功能，而不是在样式转换上花费过多时间。
2024-11-29 18:11:25
588
原创 【Element Plus】虚拟化表格动态渲染大量数据
最近有个需求是用表格渲染大量数据，寻常使用用el-table渲染时，发现浏览器崩溃了눈_눈。需要有效的解决方案来确保应用的流畅性，在这里记录一下Virtualized Table虚拟化表格动态渲染大量数据的用法。Element Plus 官网中的虚拟化表格UI比较丑，我们需要改一下，跟el-table基本保持。
2024-11-28 20:13:58
786
原创 【Element Plus】输入框明密文切换光标错位问题
在使用Element Plus的el-input组件时，密码输入框的明密文切换是一个常见需求。然而在切换过程中，可能会发现光标的位置并不会自动调整到文本的末尾，而是回到了输入框的首字符。这对用户体验来说是一个不小的困扰。本文将详细介绍如何通过简单的代码调整来优雅地解决这一问题。
2024-11-26 18:27:40
811
原创 【Element Plus】图片上传及压缩
由于页面列表显示较大图片时会导致卡顿或者图片显示加载较慢，给用户带来不好的体验，因此需要在图片上传时进行压缩处理，本文将介绍如何使用 Vue 3、TypeScript 以及 Element Plus 来实现一个简单的图片上传和压缩功能。
2024-11-21 18:18:50
335
原创 【可视化开发】小程序Echarts自定义图例legend
图例是 ECharts 中用来标识数据系列的组件之一，ECharts 默认提供了一些基础的图标类型，比如圆形、矩形、三角形等。然而，Echarts的配置项有时无法满足前端对UI的还原，此时需要用图标配置icon的形式。
2024-11-01 18:38:56
507
原创 【浏览器】复制图片到剪贴板
在 Web 开发中，用户体验的提升往往离不开一些细微的交互细节。比如，能够将图片直接复制到剪贴板而不需要用户手动下载和上传，这无疑能大大提升用户的使用体验。本文将通过一段代码来展示如何在浏览器中实现这个功能，尤其是在需要处理不同图片格式的情况下。
2024-10-22 18:02:11
497
原创 【图片】卷帘对比
之前参与的项目做过基于Cesium的地图影像，正好最近负责的项目也有相关功能（普通图片版），就挑战一下不用Cesium原生api该如何实现卷帘对比。
2024-10-18 18:01:33
1008
原创 【AbortController】中断Promise请求，解决竞态条件问题
是一个内置于浏览器的 API，它允许你创建一个可以用于取消一个或多个 Fetch 请求的信号。通过使用，你可以在需要时主动取消异步操作，避免处理过时的数据。
2024-10-16 18:00:36
571
原创 【图片高亮】CSS 滤镜实现高亮后端返回的图片
CSS 滤镜（filter）是一组允许我们在网页上直接应用图像效果的属性。例如，滤镜可以用来调整亮度、对比度、饱和度等。它们不仅能应用在图片上，也可以应用在其他元素上，例如视频或背景图片。
2024-10-14 18:02:23
312
原创 【Cesium】卷帘对比
（2）由于设计中分割线的不同状态是不同的样式，因此仅利用原生鼠标监听事件不足以完成需求，还需要使用Cesium的事件监听。其中：鼠标左键动作：LEFT_UP、LEFT_DOWN；由于本次需求是在目录树中勾选方案一/方案二图层资源，因此需判断是将图层加载到分割线的左侧还是右侧。以上就是基于Cesium卷帘对比的实现， ^-^ 在进行卷帘对比功能的开发时，还需注意一些细节部分，如分割线拖拽到视图边缘时的处理。卷帘对比，是在同一个三维场景里通过拖拽分割线查看左右/上下两边图层的效果。
2023-09-07 18:37:09
1378
原创 【微前端】使用无界嵌入子应用
所谓微前端，就是把一个应用当成vue组件嵌入到另一个应用。将一个页面拆分成独立的小型应用，各个应用间相互独立，可以随意组合，更加灵活。原生比较常用的方案是使用iframe，但是这种方案存在一些缺点，如：dom隔离严重、路由无法保活、父子应用通讯困难等。本文将介绍一种基于iframe的全新微前端方案 --【无界】，解决了上述问题外还具有成本低、速度快、原生隔离、功能强等优点。使用iframe作为天然的js沙箱，不会污染主应用环境使用 Web Components 来隔离htmlcss。
2023-06-24 16:10:47
4529
1
原创 【可视化开发】仪表盘的绘制
不同于可视化开发中常见的饼状图、折线图、柱状图，仪表盘所用的例子相对比较少。当我们遇到需要用仪表盘的形式展示数据的需求时，应该怎么配置ECharts的选项数据呢？其实实现思路也是大同小异的，我们可以在series一个个配置所需绘制的图形。
2023-05-20 15:37:59
341
1
原创 【高德地图】自定义覆盖物点的样式
我们可以写一个方法设置点的样式，在初始化渲染点时，调用该设置样式方法。注意 marker.setOffset 设置值的大小，需要跟图片匹配，否则地图在缩放的时候，点会出现飘移的情况。为了跟系统的风格统一，有更丰富美观的呈现效果，有时我们需要自定义高德地图覆盖物点的样式，那么需要如何设置呢？初始化地图，渲染覆盖物点。
2023-05-20 13:16:15
744
1
原创 【高德地图】点的分组聚合
但是有时我们希望可以看到不同类型点，聚合后分别的统计数据，参考网上的很多方法，基本都是在渲染点的时候监听pointRender方法返回的marker，根据marker的不同类型再做聚合效果，这样就会特别麻烦。其实我们可以先将点分好类，重写点渲染的方法，再创建多个点聚合实例去解决这个问题，方便又高效。有的时候我们需要在地图上渲染大量的点，为了让视觉上的效果更美观，我们需要用到点聚合，也就是地图随着缩放层级的不同，某区域的点聚合到一起，并且显示该区域点的统计数量，如下图。至此便解决点的分组聚合问题^-^
2023-05-20 12:44:40
1667
1
原创 【Cesium】鼠标点击底图拾取坐标、图层
Cesium常用的鼠标事件包括左击、右击，左键双击等，分别对应Cesium.ScreenSpaceEventType.LEFT_CLICK、Cesium.ScreenSpaceEventType.RIGHT_CLICK、Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK。当进入页面，添加鼠标的点击事件监听，以鼠标左击为例。该事件返回鼠标在屏幕点击的位置，再调用 pickPosition 方法即可转为笛卡尔坐标，通过笛卡尔坐标可以转换成经纬度坐标。
2023-05-20 11:56:45
1002
1
原创 【高德地图】地址关键词模糊检索，重写原生效果
首先在template写好输入框，请注意需要给该元素标识唯一id（tipinput），监听回车事件，调用以下api。若需要结合系统的数据，请注意需处理经纬度问题，因为高德是火星坐标系，不一致的话会出现定位不准确的问题。由于地图跟检索结果的渲染不在同一个组件，我使用Pinia更新检索结果数据。如果你不想使用JS API的结果面板，panel可以缺省或者赋值false，然后可以在search()的回调中处理自己的逻辑。目前高德地图地址检索的模式有两种，一种仅显示文字结果，一种返回面板，如下图。
2023-05-20 11:06:37
1189
1
原创 【可视化开发】模拟ECharts图例，但效果更丰富！
想要更丰富效果的ECharts图例但是原生配置项legend不满足需求？使用HTML显示但又不能割舍鼠标在图例上的交互？莫急，我们完全可以像写HTML一样，但是仍然有鼠标移上去后的图表交互。当鼠标进来，关键代码：chart.dispatchAction，注意：seriesIndex是你想要出现交互效果的饼状图，对应series数据。首先我们像平常写HTML一样渲染图例的数据，添加你希望展示的样式效果。然后在元素上监听鼠标的移入移出。至此完成我们的需求^-^
2023-05-19 23:46:57
154
1
原创 【可视化开发】ECharts绘制复杂环形图
当遇到用ECharts绘制复杂环形图的需求时，你的解决方案是什么？直接用图片当背景图？nonono，分辨率不够遇到大屏岂不糊掉？别急，我们可以到相关网站去查找类似的环形图再加以改进，达到UI设计稿的效果。我的思路是将复杂的环形图拆分成一个个饼状图，再一一绘制。
2023-05-19 23:26:57
748
1
原创 【可视化开发】鼠标移到ECharts地图显示酷炫效果
在可视化的开发过程中，有时我们需要利用ECharts绘制地图，当鼠标移上去时显示一些酷炫的效果，如统计结果需要好看的背景图。需要怎么配置ECharts的api呢？鼠标移向地图显示效果对应的是tooltip这个属性，当我们想要自定义显示效果，那么重写tooltip对象的formatter属性即可。引入背景图片，注意返回的HTML模板使用的是原生img标签，需要先引入图片（@xxx方式），这样项目打包部署才能正常显示图片。
2023-05-19 22:52:57
1031
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人