随笔分类 - 前端开发
摘要:今天发现el-tabs一个奇怪的bug: tabs绑定v-model,第一次给绑定变量赋值跳转有效,点击切换tab后再次修改绑定变量,此时跳转无效,要手动调用setCurrentName方法。 调用方法如下(假设给tabs设置ref为'tabs'): this.$refs.tabs.setCurre
阅读全文
摘要:> CustomShader官网文档(1.95版本):http://cesium.xin/cesium/en/Documentation1.95/CustomShader.html 一个比较刁钻的例子。 这几天想给模型贴图,学习用CustomShader,找了几个文章的demo和官方demo,都不生
阅读全文
摘要:报错内容: [vite] Internal server error: Illegal tag name. Use '<' to print '`标签后报错,但其他vue文件可以正常读取和展示。 报错的文件,去掉``标签就可以正常加载。报错的方法是vue-compiler的`baseParse()`
阅读全文
摘要:## 情景 1. 框架:Vue3 + Vite4 + VueRouter4.1.6 2. 需求:现需要实现点击打开新页面,并把一些数据传过去 3. 限制: - 数据量较大,有一定私密性,不适合用query传递; - 需要从session中获取token判断访问权限,因此需要用router.resol
阅读全文
摘要:## 参考 [CSS flex布局最后一行左对齐的常用方法](https://blog.csdn.net/m0_37714008/article/details/125780293) 感谢这位博主 ## 代码 ``` .list { display: grid; // ← justify-conte
阅读全文
摘要:[vite] Internal server error: loadModule is not a function Plugin: commonjs File: E:/project/xxxx/knockout-es5/knockout-es5.min.js at analyzeRequiredM
阅读全文
摘要:An error occurred while rendering. Rendering has stopped. undefined RangeError: Invalid array length RangeError: Invalid array length at updateFrustum
阅读全文
摘要:同样是懒人想找现成的但没找到,参考其他朋友提供的思路现写一个。 有小bug,等领导让改的时候再说(。) 效果 代码 简单的demo。 DragBar.vue <template> <div class="popup__top" @touchstart="onTouchstart" @touchmov
阅读全文
摘要:很刁钻的问题,排查了好久。 我自己开发测试用的浏览器(版本为112)运行正常,在老版本(75)谷歌浏览器报错如下: mapbox-gl.js:32 Uncaught TypeError: Failed to execute 'getImageData' on 'CanvasRenderingCont
阅读全文
摘要:最近写h5要做那种稍微复杂一点的树,没找到现成的UI组件库可用,vant的树只有两级不满足,只能自己写 ps. 选框的选择/反选/半选对父子选项的影响还有bug,留到脑子好的时候再优化 效果 代码 框架是Vue3+Vite+Vant4。复选框用的vant的checkbox,应该也可以换别的或者原生。
阅读全文
摘要:适用场景: 需要在地图上展示很多种数据,这些数据使用的图标形状是有限的几种,但颜色可能由后台自由配置后传给前端。 数据种类可能会变化,颜色可能会变化,这种情况下让设计同事切一堆图反而不方便维护,使用动态加载图标可以一定程度上节省前端的后期工作。 前端框架是vue3+vite,其他框架能否实现未验证。
阅读全文
摘要:首先需要以组件形式使用svg,请先看这篇文章:vite中加载使用svg 可能是跟原博主使用的svg格式不同,用:style="{ color: color }"修改颜色不生效,因此做了一点修改,此修改适用的svg如下: 在iconfont官网收藏下载的svg格式图标,打开文件删除其中的fill=xx
阅读全文
摘要:mapbox-gl-draw官网给出的扩展模式终于无法满足需求,需要diy了。 因为是diy,所以不存在前文说的commonjs打包报错的问题,呵呵。 前文:Mapboxgl draw 自定义标绘:圆、矩形、自由多边形、上传读取geojson (有的概念可能会接续前文不做解释) 参考链接 自定义MO
阅读全文
摘要:用于避免图层内标记点注册的点击事件重复触发(点位分布密集时容易出现) map.on("click", layerId, (e) => { // 禁止点击事件穿透 - 判断同一个event是否已经触发 if (e.defaultPrevented) return; // 你要做的逻辑 func(e);
阅读全文
摘要:文档 官网文档:https://www.npmjs.com/package/v-drag 使用 安装、引入 npm install v-drag --save import drag from "v-drag" 使用 直接使用: <div v-drag>Drag me!</div> 注意:对原本绝对
阅读全文
摘要:还没做文字标绘,累了,以后有需要有机会再说 下一篇:Mapboxgl draw 自定义标绘之二:图标、文本、圆形的创建与编辑,重写原模式相关方法,保持当前模式 自定义标绘方法 Mapboxgl标绘相关库 我当前使用的版本是: "@mapbox/mapbox-gl-draw": "^1.4.1", "
阅读全文
摘要:自定义弹窗的开发 自定义弹窗类CustomPopup.js export default class CustomPopup { // options.coordinates用于地图定位,必须有,其他属性根据具体业务调整 constructor(options) { this.popup = nul
阅读全文
摘要:这个问题遇到不下三次了,每次都有新的被折磨体验,令人头秃。希望这次可以彻底解决。 这次遇到问题的是mapboxgl的标绘插件@mapbox/mapbox-gl-draw的圆形扩展插件mapbox-gl-draw-circle,它用了commonjs语法,vite开发环境时引入没有问题,但打包后会报错
阅读全文
摘要:点进去后指向这一行: 重新一行一行看,发现是整理代码的时候,以为有一个prop变量用不到,删了,结果在组件模板另一个地方有用。奇怪这类问题为什么编辑器不会提示出来。 但是,把props补回去后又出现了新问题: 之前加载地图正常,突然报这个错。打断点发现是在mounted时dom没有渲染出来。把当前引
阅读全文
摘要:新建map-func.js,在main.js中全局定义$mapFunc。 map-func.js function getLayer(layerId) { return window.map.getLayer(layerId); } export default { getLayer }; main
阅读全文