摘要： 项目中遇到需要实现指定位置的截图，采取使用依赖 html2canvas 实现。 参考：https://html2canvas.hertzen.com/ 一、实现步骤： 1、下载依赖或者使用官方js文件链接，本文使用的js链接； 2、代码 style .screen-box { padding: 20 阅读全文

摘要： 使用animation实现卡片翻转动效‌，效果如下（iPhone转的gif有卡顿，实际效果流畅）： 先上全部代码，再在最后给出代码解析，分步说明实现原理。 html <div class="visual-card"> <div class="contain"> <div class="section 阅读全文

摘要： 在阿里云DataV数据可视化平台可获取到行政区域边界数据，从中截取需要的数组，获取数据后结合Three.js，可绘制出四川省的行政区边界线，如下： script import * as THREE from 'three' // 导入轨道控制器 import { OrbitControls } fr 阅读全文

摘要： AMapUI是在运行时动态加载的，报错信息如图所示： 由此知晓是ESLint校验时出现的报错，可以在ESLint配置中添加规则来忽略no-undef错误 "rules": { "no-undef": "off" } 以上。 阅读全文

摘要： 使用while循环，更便捷简练，代码如下： const countUnit = (value: number, section = 10) => { let i = 0; let sum = value / section; while (sum > section) { sum = sum / s 阅读全文

摘要： 1、安装Echarts高德地图扩展echarts-extension-amap； npm i echarts-extension-amap --save 2、引入Echarts和高德地图； npm i echarts --save npm i @amap/amap-jsapi-loader --sa 阅读全文

摘要： 使用高德地图创建区域掩模，参考高德地图api，效果如下： 不难发现绘制的地图自带了默认的颜色和背景图，如图： 需求为需要透出父元素中的背景图，那么就需要将绘制高德地图节点和canvas的背景去除。 1、可通过直接设置CSS去除类名 amap-container 的背景图； .amap-contain 阅读全文

摘要： 效果如下： 使用： <search-list :list="List" :isShow="true" :isAddShow="true" :keyName="key" :typeName="name" @item-check="itemCheck" @show-status="showStatus" 阅读全文

摘要： Vue项目使用less语法时报错如图： 错误原因： 由于组件库的less版本低，与配置的默认值不同导致。 解决方法： 在vue.config.ts文件中添加自定义配置项。 1、vite: module.exports = { css: { preprocessorOptions: { less: { 阅读全文

摘要： 使用CSS3的clip-path实现不规则图形裁剪，结合CSS3 animation实现粒子下落动画效果，如下： html: 创建不规则容器及下落的粒子节点； <div class="particle"> <i v-for="item of 20" :key="item" class="partic 阅读全文