Ra-Liz's Blog

前言项目做到一定程度，有了跨语言需求。查阅发现目前前端较为通用的跨语言方式是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 ...

elementui el-upload实现图片列表展示、上传和删除halohalohalo好久不见 业务需求增加和修改内容中包含一个图片路径列表，需要对图片列表进行展示和操作（添加、预览、查看大图、下载、删除） 分析 弹出框中使用el-upload组件展示和操作图片列表，参考效果：https://element.eleme.io/#/zh-CN/component/upload#wen-jian-suo-lue-tu 关闭弹出框/点击取消时，需要将此次图片列表新增的图片删去，释放存储空间 相较于新增弹出框，修改弹出框需要事先展示从后端获取到的图片列表，因此需要两个el-upload标签来分类 接口需求 添加图片POST 删除图片DELETE 查询图片GET 其中，el-upload添加图片使用组件参数方式设置，查询亦是无需手动获取。删除需要手动。 1imgUrl: process.env.VUE_APP_BASE_API + "/system/deviceFault/uploadPhoto" 接下来分新增和修改两种来阐述代码构建过程 新增首先，这是一个图片列 ...

前言工作中遇到项目使用的node版本比较早，这个时候一般会选择两种方式解决： 直接安装一个指定版本的node，比较直接，但是不方便切换 使用nvm管理node版本，可以随时切换node版本，但是安装配置有可能出点问题 我就遇到了上图的问题，查了很多地方，没啥用，最后找到了这个方法👇 别跟我说要删干净node再下载nvm，install不成功需要配置镜像什么什么的。 直接下载node包，解压重命名，放nvm文件夹里，谢谢qvq 详细步骤 下载安装nvm，参考fcc给出的流程：https://www.freecodecamp.org/chinese/news/node-version-manager-nvm-install-guide/ 手动下载node包 https://nodejs.org/zh-cn/download/prebuilt-binaries 解压node包，重命名，放入nvm目录下 重命名：v+版本，见下图 注意检查一下解压是怎么解的，别目录套目录了 检查成没成功 成功了。 可以仿照这个思路试一试捏，如果有效，欢迎赞助我一瓶矿泉水qvq（或 ...

前言​ 本人ruoyi vue2模板搭建的管理项目中集成Cesium，踩了诸多坑。 ​ 各种查阅和看Demo，测试出来了可行的配置。特来分享，或许可以减少各位同伴踩到的坑（如果可以，麻烦在文章底部留个言，我想知道有多少朋友也在做这个工作）。 配置步骤 版本道传版本要≤1.95.0，这里参考https://github.com/syzdev/vue-cesium-start使用了1.80.0版本 添加一个loader: @open-wc/webpack-import-meta-loader vue.config.js配置 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081'use strict'const path = require('path')const webpack = ...