index.html

<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><title>Ra-Liz's Blog - 草莓带叶，山楂带核，无言无畏</title><meta name="author" content="Ra-liz"><meta name="copyright" content="Ra-liz"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="食栗至上">
<meta property="og:type" content="website">
<meta property="og:title" content="Ra-Liz&#39;s Blog">
<meta property="og:url" content="https://ra-liz.github.io/index.html">
<meta property="og:site_name" content="Ra-Liz&#39;s Blog">
<meta property="og:description" content="食栗至上">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://ra-liz.github.io/img/favicon.png">
<meta property="article:author" content="Ra-liz">
<meta property="article:tag" content="Ra-Liz,Ra-Liz的博客,Yifan">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://ra-liz.github.io/img/favicon.png"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://ra-liz.github.io/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":false,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  }
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Ra-Liz\'s Blog',
  isPost: false,
  isHome: true,
  isHighlightShrink: false,
  isToc: false,
  postUpdate: '2025-02-16 18:41:37'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = url => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      link.onload = () => resolve()
      link.onerror = () => reject()
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 5.4.2"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/favicon.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">53</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">38</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">16</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('/img/banner.jpg')"><nav id="nav"><span id="blog-info"><a href="/" title="Ra-Liz's Blog"><span class="site-name">Ra-Liz's Blog</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">Ra-Liz's Blog</h1><div id="site-subtitle"><span id="subtitle"></span></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/a79b.html" title="vue项目i18n配置和插件i18n Ally的使用">vue项目i18n配置和插件i18n Ally的使用</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2025-02-16T10:23:01.000Z" title="发表于 2025-02-16 18:23:01">2025-02-16</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE/">项目配置</a></span></div><div class="content">前言项目做到一定程度，有了跨语言需求。查阅发现目前前端较为通用的跨语言方式是i18n，遂实践。
配置步骤
下载对应vue版本的vue-i18n 版本

在合适位置创建i18n目录


根据语言创建对应的json文件

i18n.js
123456789101112131415161718192021222324252627282930313233343536373839import Vue from &quot;vue&quot;;import VueI18n from &quot;vue-i18n&quot;;import cn from &quot;@/locales/zh-CN/index.json&quot;;import en from &quot;@/locales/en/index.json&quot;;Vue.use(VueI18n);const langList = [&quot;en&quot;, &quot;zh&quot;];const initKey = initLangKey();// 根据偏好和浏览器属性初始化语言function initLangKe ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/b9fa.html" title="elementui 自定义icon">elementui 自定义icon</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2025-01-25T03:23:07.000Z" title="发表于 2025-01-25 11:23:07">2025-01-25</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/elementui/">elementui</a></span></div><div class="content">esay
1234567891011// 1. 将图片存入项目// 2. icon-class的背景图片路径指向自定义图片位置.el-icon-search &#123;  background: url(&quot;../icon/search.svg&quot;) center center no-repeat;  background-size: contain; // 可选  width: 18px; // 可选&#125;.el-icon-search:before &#123;  content: &quot;&quot;;  visibility: hidden;&#125;

顺带一提，eui很多组件都可传入自定义样式类，确保非socoped能让组件访问到就行
</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/8646.html" title="vue实现一个简易直梯导航">vue实现一个简易直梯导航</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2025-01-25T03:12:53.000Z" title="发表于 2025-01-25 11:12:53">2025-01-25</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E6%89%8B%E6%90%93/">手搓</a></span></div><div class="content">前言所谓直梯导航就是类似各种技术文档中右侧menu和文档的跳转和高亮。现在用vue2实现一个建议的导航控件。
以下给出一种思路，使用场景是滚动列表中的子项仅有一个可完整展示在视口内。

滚动⇒控件高亮
12345678910111213141516171819202122// 给滚动容器绑定监听，不用了记得删除一下监听this.$refs.listWrap.addEventListener(&quot;scroll&quot;, this.handleScroll);handleScroll() &#123;  const listWrap = this.$refs.listWrap;  // 获取滚动容器所有子项  const items = listWrap.querySelectorAll(&quot;.item&quot;);  let foundIndex = 0;  // 遍历子项  items.forEach((item, index) =&gt; &#123;      // 获取子项的domRect对象    const rect = item.getBounding ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/4319.html" title="vue2封装websocket，全局持久监听">vue2封装websocket，全局持久监听</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2025-01-25T03:02:39.000Z" title="发表于 2025-01-25 11:02:39">2025-01-25</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE/">项目配置</a></span></div><div class="content">前言在vue前端项目中全局使用websocket，需要用到全局状态管理(这里使用vuex)，为方便以后类似场景搭建，这里记录一下。
具体步骤
封装websocket类
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455// @/utils/websocket.js export default class WebSocketClient &#123;  constructor(url, onMessageCallback, onErrorCallback) &#123;    this.token = localStorage.getItem(&quot;lidar_token&quot;);    let socketUrl = `ws://your-base-url`;    this.url = socketUrl + url;    this.onMessageCallback = onMessageCallback;    t ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/df3e.html" title="前端 vue2 leaflet 离线地图(以百度地图为例)">前端 vue2 leaflet 离线地图(以百度地图为例)</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2025-01-14T11:32:35.000Z" title="发表于 2025-01-14 19:32:35">2025-01-14</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E7%BB%98%E5%9B%BE/">绘图</a></span></div><div class="content">思路下载地图瓦片⇒瓦片存项目中⇒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// ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/7abf.html" title="打算规范一下博客">打算规范一下博客</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-10-28T12:47:53.000Z" title="发表于 2024-10-28 20:47:53">2024-10-28</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E6%80%9D%E8%80%83/">思考</a></span></div><div class="content">为什么想重新规范一下博客呢？最近业余时间经常会看周刊，机缘巧合下又捕获到了几个不错的文章站点。
一个站点是XboxYan大佬的纯CSS实现功能合集，另一个站点是范兄特别简明且优雅的个人博客。
跟着两位大佬写了不少小功能，而且看完范兄的2023年度总结文章心潮澎湃。
转眼看看自己的博客，营养价值极低，而且有的太啰嗦了（学生时代写的东西让现在的自己感到一头问号），所以打算把自己的博客翻修一下。
计划赶不上变化，从这里动态记录盖房子装修过程吧。

文章的分类和标签整理一下√
没用的文章得删一下了
文章用语禁止携带个人情感

</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/4922.html" title="使用leaflet绘制地图，地图包含站点">使用leaflet绘制地图，地图包含站点</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-10-22T11:29:19.000Z" title="发表于 2024-10-22 19:29:19">2024-10-22</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E7%BB%98%E5%9B%BE/">绘图</a></span></div><div class="content">
创建一个容器
12345678910111213141516const map = L.map(&quot;map&quot;, &#123;        center: [41.486904, 122.621087], // 中心lo&amp;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 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/f90b.html" title="el-upload实现图片列表展示上传删除">el-upload实现图片列表展示上传删除</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-10-21T12:17:02.000Z" title="发表于 2024-10-21 20:17:02">2024-10-21</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/elementui/">elementui</a></span></div><div class="content">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 + &quot;/system/deviceFault/uploadPhoto&quot;

接下来分新增和修改两种来阐述代码构建过程
新增首先，这是一个图片列 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/5821.html" title="快速有效使用nvm控制node版本（手动操作，有效）">快速有效使用nvm控制node版本（手动操作，有效）</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-09-10T10:34:13.000Z" title="发表于 2024-09-10 18:34:13">2024-09-10</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE/">项目配置</a></span></div><div class="content">
前言工作中遇到项目使用的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（或 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/post/4de9.html" title="适用于ruoyi vue2的cesium配置">适用于ruoyi vue2的cesium配置</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2024-09-10T10:33:44.000Z" title="发表于 2024-09-10 18:33:44">2024-09-10</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE/">项目配置</a></span></div><div class="content">前言​    本人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&#x27;use strict&#x27;const path = require(&#x27;path&#x27;)const webpack =  ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/#content-inner">2</a><span class="space">&hellip;</span><a class="page-number" href="/page/6/#content-inner">6</a><a class="extend next" rel="next" href="/page/2/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/favicon.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Ra-liz</div><div class="author-info__description">食栗至上</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">53</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">38</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">16</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/Ra-Liz"><i class="fab fa-github"></i><span>俺的GitHub</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"><p align="center">微信号：raliz2333</p> <p align="center">QQ号：2879055132</p> <em align="center">Hi~It's Liz the coding guy!</em></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/post/a79b.html" title="vue项目i18n配置和插件i18n Ally的使用">vue项目i18n配置和插件i18n Ally的使用</a><time datetime="2025-02-16T10:23:01.000Z" title="发表于 2025-02-16 18:23:01">2025-02-16</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/post/b9fa.html" title="elementui 自定义icon">elementui 自定义icon</a><time datetime="2025-01-25T03:23:07.000Z" title="发表于 2025-01-25 11:23:07">2025-01-25</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/post/8646.html" title="vue实现一个简易直梯导航">vue实现一个简易直梯导航</a><time datetime="2025-01-25T03:12:53.000Z" title="发表于 2025-01-25 11:12:53">2025-01-25</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/post/4319.html" title="vue2封装websocket，全局持久监听">vue2封装websocket，全局持久监听</a><time datetime="2025-01-25T03:02:39.000Z" title="发表于 2025-01-25 11:02:39">2025-01-25</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/post/df3e.html" title="前端 vue2 leaflet 离线地图(以百度地图为例)">前端 vue2 leaflet 离线地图(以百度地图为例)</a><time datetime="2025-01-14T11:32:35.000Z" title="发表于 2025-01-14 19:32:35">2025-01-14</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
            <i class="fas fa-folder-open"></i>
            <span>分类</span>
            <a class="card-more-btn" href="/categories/" title="查看更多">
    <i class="fas fa-angle-right"></i></a>
            </div>
            <ul class="card-category-list" id="aside-cat-list">
            <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Git/"><span class="card-category-list-name">Git</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">4</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Next-js/"><span class="card-category-list-name">Next.js</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Vue/"><span class="card-category-list-name">Vue</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/elementui/"><span class="card-category-list-name">elementui</span><span class="card-category-list-count">3</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><span class="card-category-list-name">学习笔记</span><span class="card-category-list-count">10</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E6%80%9D%E8%80%83/"><span class="card-category-list-name">思考</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E6%89%8B%E6%90%93/"><span class="card-category-list-name">手搓</span><span class="card-category-list-count">4</span></a></li>
            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/CSS/" style="font-size: 1.1em; color: #999">CSS</a> <a href="/tags/CSS%E5%AE%9E%E7%8E%B0%E4%B8%89%E8%A7%92%E5%BD%A2/" style="font-size: 1.1em; color: #999">CSS实现三角形</a> <a href="/tags/DFS/" style="font-size: 1.1em; color: #999">DFS</a> <a href="/tags/HTML/" style="font-size: 1.1em; color: #999">HTML</a> <a href="/tags/HTTP%E5%8D%8F%E8%AE%AE/" style="font-size: 1.1em; color: #999">HTTP协议</a> <a href="/tags/JQuery/" style="font-size: 1.1em; color: #999">JQuery</a> <a href="/tags/JavaScript/" style="font-size: 1.1em; color: #999">JavaScript</a> <a href="/tags/SpringBoot/" style="font-size: 1.1em; color: #999">SpringBoot</a> <a href="/tags/TypeScript/" style="font-size: 1.1em; color: #999">TypeScript</a> <a href="/tags/Vite/" style="font-size: 1.1em; color: #999">Vite</a> <a href="/tags/Vue2/" style="font-size: 1.1em; color: #999">Vue2</a> <a href="/tags/Vue3/" style="font-size: 1.1em; color: #999">Vue3</a> <a href="/tags/coding/" style="font-size: 1.1em; color: #999">coding</a> <a href="/tags/echarts/" style="font-size: 1.1em; color: #999">echarts</a> <a href="/tags/el-icon/" style="font-size: 1.1em; color: #999">el-icon</a> <a href="/tags/el-pagination/" style="font-size: 1.1em; color: #999">el-pagination</a> <a href="/tags/el-table/" style="font-size: 1.1em; color: #999">el-table</a> <a href="/tags/el-upload/" style="font-size: 1.1em; color: #999">el-upload</a> <a href="/tags/i18n/" style="font-size: 1.1em; color: #999">i18n</a> <a href="/tags/leaflet/" style="font-size: 1.5em; color: #99a9bf">leaflet</a> <a href="/tags/ruoyi/" style="font-size: 1.1em; color: #999">ruoyi</a> <a href="/tags/tailwindcss/" style="font-size: 1.5em; color: #99a9bf">tailwindcss</a> <a href="/tags/websocket/" style="font-size: 1.1em; color: #999">websocket</a> <a href="/tags/%E4%B8%AD%E9%97%B4%E4%BB%B6/" style="font-size: 1.1em; color: #999">中间件</a> <a href="/tags/%E4%BA%8C%E5%8F%89%E6%A0%91/" style="font-size: 1.1em; color: #999">二叉树</a> <a href="/tags/%E5%8A%A8%E8%A7%84/" style="font-size: 1.1em; color: #999">动规</a> <a href="/tags/%E5%8D%9A%E5%AE%A2/" style="font-size: 1.1em; color: #999">博客</a> <a href="/tags/%E5%90%8C%E6%AD%A5%E5%92%8C%E5%BC%82%E6%AD%A5/" style="font-size: 1.1em; color: #999">同步和异步</a> <a href="/tags/%E6%97%A0%E9%99%90%E5%88%97%E8%A1%A8/" style="font-size: 1.1em; color: #999">无限列表</a> <a href="/tags/%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7/" style="font-size: 1.1em; color: #999">构建工具</a> <a href="/tags/%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80/" style="font-size: 1.1em; color: #999">瀑布流布局</a> <a href="/tags/%E7%9B%B4%E6%A2%AF%E5%AF%BC%E8%88%AA/" style="font-size: 1.1em; color: #999">直梯导航</a> <a href="/tags/%E7%BD%91%E7%BB%9C%E9%80%9A%E4%BF%A1/" style="font-size: 1.1em; color: #999">网络通信</a> <a href="/tags/%E8%8A%82%E6%B5%81/" style="font-size: 1.1em; color: #999">节流</a> <a href="/tags/%E8%93%9D%E6%A1%A5%E6%9D%AF/" style="font-size: 1.1em; color: #999">蓝桥杯</a> <a href="/tags/%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84/" style="font-size: 1.1em; color: #999">视觉映射</a> <a href="/tags/%E8%B7%A8%E5%B9%B3%E5%8F%B0%E5%BC%80%E5%8F%91/" style="font-size: 1.1em; color: #999">跨平台开发</a> <a href="/tags/%E9%98%B2%E6%8A%96/" style="font-size: 1.1em; color: #999">防抖</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2025/02/"><span class="card-archive-list-date">二月 2025</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2025/01/"><span class="card-archive-list-date">一月 2025</span><span class="card-archive-list-count">4</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/10/"><span class="card-archive-list-date">十月 2024</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/09/"><span class="card-archive-list-date">九月 2024</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/08/"><span class="card-archive-list-date">八月 2024</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/07/"><span class="card-archive-list-date">七月 2024</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/12/"><span class="card-archive-list-date">十二月 2023</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">53</div></div><div class="webinfo-item"><div class="item-name">已运行时间 :</div><div class="item-count" id="runtimeshow" data-publishDate="2023-02-13T16:00:00.000Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2025-02-16T10:41:37.612Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('/img/banner.jpg')"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2025 By Ra-liz</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="chat_btn" type="button" title="聊天"><i class="fas fa-sms"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="/js/search/local-search.js"></script><div class="js-pjax"><script>window.typedJSFn = {
  init: (str) => {
    window.typed = new Typed('#subtitle', Object.assign({
      strings: str,
      startDelay: 300,
      typeSpeed: 150,
      loop: true,
      backSpeed: 50,
    }, null))
  },
  run: (subtitleType) => {
    if (true) {
      if (typeof Typed === 'function') {
        subtitleType()
      } else {
        getScript('https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js').then(subtitleType)
      }
    } else {
      subtitleType()
    }
  }
}
</script><script>function subtitleType () {
  if (true) {
    typedJSFn.init(["用心动脑，出手踏脚","吾日三省吾身","栗子好吃~树难栽~"])
  } else {
    document.getElementById("subtitle").innerHTML = '用心动脑，出手踏脚'
  }
}
typedJSFn.run(subtitleType)</script></div><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/click-heart.min.js" async="async" mobile="false"></script><script src="//code.tidio.co/xzhcnp9bny5j2ndsjsbuqeshasoivnnz.js" async="async"></script><script>function onTidioChatApiReady() {
  window.tidioChatApi.hide();
  window.tidioChatApi.on("close", function() {
    window.tidioChatApi.hide();
  });
}
if (window.tidioChatApi) {
  window.tidioChatApi.on("ready", onTidioChatApiReady);
} else {
  document.addEventListener("tidioChat-ready", onTidioChatApiReady);
}

var chatBtnFn = () => {
  document.getElementById("chat_btn").addEventListener("click", function(){
    window.tidioChatApi.show();
    window.tidioChatApi.open();
  });
}
chatBtnFn()
</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>