Ra-Liz's Blog

d3中，绘制一个图标，一般有两种方式：简单的手绘，繁琐的可以直接引入。 手绘手绘自由度极高，可以直接用svg绘制，可以绑定css央视，还可以使用d3许多属性。这里不过多赘述。 引入对于复杂的图形，直接引入是明智的选择。下面是几种常见的引用方法↓ 使用html 12345this.svg.append("g").html(getInfoSvg())export const getInfoSvg = () => { return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g><path d="M7.99954,0 ...

前言在开发过程中，往往会根据功能/接口更新而开发出不同版本，需要做一些必要的区分。 版本号主版本.更新版本.修订号 major.minor.patch major: 不兼容的API修改.增加向下兼容性功能.功能问题修正 minor: 增加功能 patch: 最已有功能的修改 执行12345678910# 修改版本号：首先确保本地git已是commit过的干净分支，随后根据实际情况执行，git会自动创建一个版本号tagnpm version major/minor/patch# 更新预发布版本号npm version prerelease --preid=alpha# 执行后，npm会自动创建一个git tag# 推至远程仓库git push orign dev# 发布新版(maybe)npm publish

前言Vue2实现一个包含大于2个手柄的滑块（以垂直方向为例） 思路基本思路 初始化一个色条和一个同等高度的拖拽区 遍历数组，计算每个数组的位置，赋值给style.top/bottom 给拖拽元素绑定拖拽函数，拖拽时计算和赋值位置，根据位置计算变化后的值 触发事件回调 优化 防抖：触发事件回调可以外包一层防抖，防抖时延可以作为组件参数传入 结果排序：sort 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 ...

前言项目做到一定程度，有了跨语言需求。查阅发现目前前端较为通用的跨语言方式是i18n，遂实践。 配置步骤 下载对应vue版本的vue-i18n 版本 在合适位置创建i18n目录 根据语言创建对应的json文件 i18n.js 123456789101112131415161718192021222324252627282930313233343536373839import Vue from "vue";import VueI18n from "vue-i18n";import cn from "@/locales/zh-CN/index.json";import en from "@/locales/en/index.json";Vue.use(VueI18n);const langList = ["en", "zh"];const initKey = initLangKey();// 根据偏好和浏览器属性初始化语言function initLangKe ...

esay 1234567891011// 1. 将图片存入项目// 2. icon-class的背景图片路径指向自定义图片位置.el-icon-search { background: url("../icon/search.svg") center center no-repeat; background-size: contain; // 可选 width: 18px; // 可选}.el-icon-search:before { content: ""; visibility: hidden;} 顺带一提，eui很多组件都可传入自定义样式类，确保非socoped能让组件访问到就行

前言所谓直梯导航就是类似各种技术文档中右侧menu和文档的跳转和高亮。现在用vue2实现一个建议的导航控件。 以下给出一种思路，使用场景是滚动列表中的子项仅有一个可完整展示在视口内。 滚动⇒控件高亮 12345678910111213141516171819202122// 给滚动容器绑定监听，不用了记得删除一下监听this.$refs.listWrap.addEventListener("scroll", this.handleScroll);handleScroll() { const listWrap = this.$refs.listWrap; // 获取滚动容器所有子项 const items = listWrap.querySelectorAll(".item"); let foundIndex = 0; // 遍历子项 items.forEach((item, index) => { // 获取子项的domRect对象 const rect = item.getBounding ...

前言在vue前端项目中全局使用websocket，需要用到全局状态管理(这里使用vuex)，为方便以后类似场景搭建，这里记录一下。 具体步骤 封装websocket类 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455// @/utils/websocket.js export default class WebSocketClient { constructor(url, onMessageCallback, onErrorCallback) { this.token = localStorage.getItem("lidar_token"); let socketUrl = `ws://your-base-url`; this.url = socketUrl + url; this.onMessageCallback = onMessageCallback; t ...

思路下载地图瓦片⇒瓦片存项目中⇒leaflet接入地图，简单配置一下 参考文档：https://juejin.cn/post/7102330662425722894 如果觉得难操作可以看本文的详细操作步骤。 前言离线地图最好确定好缩放级别和地图的范围，不然瓦片数量会特别多，项目打包直接指数爆炸 前置信息：leaflet的缩放级别从1到18，越大越近。使用leaflet时候一定记得引入其.css文件，不然瓦片错位，这个不用担心，具体代码放在下面了。 leaflet文档: https://leafletjs.cn/reference.html 具体操作 下载瓦片 运行程序下载地址：https://github.com/muddyrain/vue-ol-map 全能地图下载器-MapTileDownloader.rar 选择地图 选择地理范围 选择地图级别 下载，不需要下一步的拼接环节 查看下载结果 瓦片存放 把/16/17/18这些文件夹给复制到项目/public/map里 接入leaflet：通过各种方式下载包到项目。记得引入.css文件。 12// ...

为什么想重新规范一下博客呢？最近业余时间经常会看周刊，机缘巧合下又捕获到了几个不错的文章站点。 一个站点是XboxYan大佬的纯CSS实现功能合集，另一个站点是范兄特别简明且优雅的个人博客。 跟着两位大佬写了不少小功能，而且看完范兄的2023年度总结文章心潮澎湃。 转眼看看自己的博客，营养价值极低，而且有的太啰嗦了（学生时代写的东西让现在的自己感到一头问号），所以打算把自己的博客翻修一下。 计划赶不上变化，从这里动态记录盖房子装修过程吧。 文章的分类和标签整理一下√ 项目配置为一类，手搓组件为一类

创建一个容器 12345678910111213141516const map = L.map("map", { center: [41.486904, 122.621087], // 中心lo&la zoom: 7.25, // 缩放级别 zoomControl: false, // 是否将zoom控件放入图中 minZoom: 7, maxZoom: 11, zoomSnap: 0.25, // 缩放级别倍数，默认接近整数，这里允许更大颗粒度 scrollWheelZoom: false, // can scroll everywhere smoothWheelZoom: true, // enable smooth zoom ?这个文档里没找到 smoothSensitivity: 0.4, // zoom speed. default is 1 同上 attributionControl: false ...