白荼日记 - 前端

typecho给后台admin界面添加图标分析

2025-07-27T02:32:00+08:00

觉得后台admin空荡荡的，索性加个图表自己魔改一下下。以下是完整的index.php



    
        
        
            
                %s 篇文章, 并有 %s 条关于你的评论在 %s 个分类中.',
                        $stat->myPublishedPostsNum, $stat->myPublishedCommentsNum, $stat->categoriesNum); ?>
                    

                

                    pass('contributor', true)): ?>
                        
                        pass('editor', true) && 'on' == $request->get('__typecho_all_comments') && $stat->waitingCommentsNum > 0): ?>
                            
                                
                                waitingCommentsNum(); ?>
                            
                        myWaitingCommentsNum > 0): ?>
                            
                                
                                myWaitingCommentsNum(); ?>
                            
                        
                        pass('editor', true) && 'on' == $request->get('__typecho_all_comments') && $stat->spamCommentsNum > 0): ?>
                            
                                
                                spamCommentsNum(); ?>
                            
                        mySpamCommentsNum > 0): ?>
                            
                                
                                mySpamCommentsNum(); ?>
                            
                        
                        pass('administrator', true)): ?>
                            
                            
                            
                            
                            
                        
                    
                    
                
            
            

            

            
                
                    
                    to($posts); ?>
                    
                        have()): ?>
                            next()): ?>
                                
                                    date('n.j'); ?>
                                    title(); ?>
                                
                            
                        
                            
                        
                    
                
            

            
                
                    
                    
                        to($comments); ?>
                        have()): ?>
                            next()): ?>
                                
                                    date('n.j'); ?>
                                    author(false); ?>:
                                    excerpt(35, '...'); ?>

其他插件推荐：
[post cid="405" /]

去除宝塔界面一些烦人的东西

2025-07-25T13:18:02+08:00

更新之后越来越难用了，自己懒得配置nginx，mysql，这些环境，开心版的又怕后门，自己改后端的js文件看的脑瓜子疼，反正都是界面，直接js删掉一些dom元素就行了。有需要的可以拿走。

// ==UserScript==
// @name         宝塔面板优化 - 界面美化
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  移除指定 class 元素、替换特定 span 文字内容，并删除包含“需求反馈”的 span
// @match        http://152.136.153.72:9999/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
    console.log('⚠ 脚本准备加载');

    // 定义需要移除的 class 组合
    const selectorsToRemove = [
        '.h-auto.mt-\\[1\\.2rem\\]',                         // h-auto mt-[1.2rem]
        '.svgtofont-desired.\\!mr-4px.\\!text-\\[16px\\]',   // svgtofont-desired !mr-4px !text-[16px]
        '.icon-end-time-free.icon-unpaid-ltd',                // icon-end-time-free icon-unpaid-ltd
        '.el-card.is-always-shadow.is-always-shadow.\\!border-\\[\\#efefef\\]',  // el-card is-always-shadow is-always-shadow !border-[#efefef]
        '.icon-end-time.icon-unpaid-ltd' // icon-end-time icon-unpaid-ltd
    ];

    // 移除指定 class 的元素
    const removeElementsByClass = () => {
        selectorsToRemove.forEach(selector => {
            document.querySelectorAll(selector).forEach(el => el.remove());
        });
    };

    // 替换指定 span 的文字内容
    const replaceSpanText = () => {
        const spanSelector = 'span.mr-1rem.ml-\\[-1\\.5rem\\]';
        document.querySelectorAll(spanSelector).forEach(span => {
            span.textContent = '精简版';
        });
    };

    // 删除 span/button 包含 指定字符 的 span 元素
    const removeSpansWithText = () => {
        const spans = document.querySelectorAll('span');
        spans.forEach(span => {
            if (span.textContent.trim() == '需求反馈') {
                span.remove();
            }
        });
        const buttons = document.querySelectorAll('button');
        buttons.forEach(span => {
            if (span.textContent.trim() == '立即体验') {
                span.remove();
            }
        });
    };
    // 删除指定class 包含置顶字符的元素
    const removeClassWithText =()=>{
        const parents = document.querySelectorAll('.header-child-tab');
        parents.forEach(span => {
            if (
                span.textContent.trim() == '安全检测' ||
                span.textContent.trim() == '违规词检测' ||
                span.textContent.trim() == 'PHP网站安全' ||
                span.textContent.trim() == '入侵防御' ||
                span.textContent.trim() == '系统加固' ||
                span.textContent.trim() == '扫描感知' ||
                span.textContent.trim() == '日志审计' ||
                span.textContent.trim() == 'SSH登录日志'
               ) {
                span.remove();
            }
        });
        const classparents = document.querySelectorAll('.el-collapse-item');
        classparents.forEach(span => {
            if (
                span.textContent.trim().includes('top5')
               ) {
                span.remove();
            }
        });
    }

    // 删除包含特定子元素的 el-col 元素
    const removeParentIfChildExists = () => {
        // 获取所有 el-col.el-col-6.wrapper-item 元素
        const parents = document.querySelectorAll('.el-col.el-col-6.wrapper-item');
        parents.forEach(parent => {
            // 检查子元素是否包含指定的 class
            const child = parent.querySelector('.absolute.-left-1\\.5.-top-1');
            if (child) {
                parent.remove(); // 移除父元素
            }
        });
    };


    // 综合执行函数
    const removeElements = () => {
        removeElementsByClass();
        replaceSpanText();
        removeSpansWithText();
        removeParentIfChildExists();
        removeClassWithText();
    };
    // 等待dom加载完毕后执行综合函数
    let timeoutId;
    const debouncedRemove = () => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(removeElements, 200);
    };
    let runCount = 0;
    const maxRuns = 5;
    const observer = new MutationObserver((mutations, obs) => {
        if (runCount >= maxRuns) {
            obs.disconnect();
            return;
        }
        obs.disconnect();
        debouncedRemove();
        runCount++;
        obs.observe(document.body, { childList: true, subtree: true });
    });
    observer.observe(document.body, { childList: true, subtree: true });
    // 点击一次执行一次综合函数
    let clickTimeout;
    document.addEventListener('click', () => {
        clearTimeout(clickTimeout);
        clickTimeout = setTimeout(removeElements, 200);
    });
    // 初始执行（延迟 1 秒，等待 DOM 加载）
    setTimeout(() => {
        removeElements();
    }, 1000);
})();

nvm命令自查（node版本管理）

2024-11-10T14:22:19+08:00

nvm 命令	命令解释
nvm --help	展示帮助
nvm --version	已安装的nvm版本
nvm install version	下载对应的 node 版本(version)
mvn install --reinstall-packages-from=	重新安装对应的 node 版本
nvm install --lts	仅从LTS版本中选择安装
nvm install --lts=	仅从特定LTS系列的版本中选择
nvm install --skip-default-packages	跳过默认软件包文件
nvm install --latest-npm	安装后，在给定的节点版本上升级到最新的npm
nvm install --no-progress	没有下载进度条
nvm uninstall	卸载对应的 node 版本
nvm uninstall --lts	卸载LTS版本
nvm uninstall --lts=	卸载指定的LTS 版本
nvm use	使用对应的 node 版本
nvm use --lts	使用LTS 版本
nvm use --lts=	使用指定的LTS 版本
nvm list	展示安装的 node 版本(可以简写为nvm ls)
nvm current	显示当前节点的激活版本
nvm version	展示当前的 node 版本
nvm exec [--silent] []	使用指定的版本运行 command命令
nvm run [--silent] []	使用指定的版本运行 args
nvm alias	对 version 版本设置一个别名
nvm unalias	删除这个别名
nvm install-latest-npm	在当前node 版本上升级最新的npm版本
nvm reinstall-packages	将version版本中的全局安装包安装到当前版本中
nvm unload	从shell中卸载nvm
nvm on	开启node版本管理
nvm off	关闭node版本管理
nvm node_mirror [url]	设置node镜像
nvm npm_mirror [url]	设置npm 镜像

typecho的handsome主题微调

2024-11-06T16:48:00+08:00

用国typecho和wordpress之后，个人还是比较中意typecho这个，handsome主题相对全面，所以就选择使用它了。但是总有一些自己小瑕疵需要自己去调整，比如归档页面的文章目录等等，handsome版本: 9.2.1（个人是php菜鸡，没学过，一边百度一边改。）

取消归档页面的文章目录

找到主题文件下面的sidebar.php然后打开编辑，搜索到这个之后，然后会看到is('page'),false) ?>这个代码，这个就是非文章界面的文章目录显示。


      is('post'))) : ?>
      
       
          
              to($tags); ?>
              have()): ?>
                  next()): ?>
                      name(); ?>
                  
              
          
      

        
        permalink, PHP_URL_PATH);
            // 判断是否为页面，且 URL 中不包含 "archive"
            if ($this->is('page') && substr($currentUrlPath, -12) !== 'archive.html' ) {
                echo PostContent::returnTOC(true, false);
            }
        ?>

如果你想对具体方法进行操作，可以找到libs/content/PostContent.php 这个就是相应的右侧边栏的一些用到的方法。

去除掉友情链接的内页链接

友情链接嘛，就是links，那我们就在主题文件夹下搜索links

这里就是对链接的显示，注释掉你不喜欢的就可以了。

注释完毕后，如果你有强迫症的话，可以想我一样进行接下来的更改。针对后台管理的友情链接的操作。找到插件里面的handsome插件，找到Plugin.php这个文件，里面有个form函数，就是他，你若找到的话可以看到该函数下面有一部分的代码。注释掉你不喜欢的就可以了。

$sort = new Typecho_Widget_Helper_Form_Element_Select('sort', array(
            'ten' => '全站链接，首页左侧边栏显示',
            // 'one' => '内页链接，在独立页面中显示（需要新建独立页面友情链接）',
            'good' => '推荐链接，在独立页面中显示',
            'others' => '失效链接，不置输出，标注暂时失效的友链'
        ), 'ten', _t('链接输出位置*'), '选择友情链接输出的位置');

左侧边栏导航配置

打开主题的后台，可以参考本博客的配置进行修改,左侧边栏的图标用的是feather图标，点击链接跳转查看，https://feathericons.com/)

[
    {
        "name": "云盘",
        "feather": "cloud",
        "link": "https://alist.ittoolman.com/",
        "target": "_blank"
    },
    {
        "name": "图床",
        "feather": "inbox",
        "link": "https://img.ittoolman.com/",
        "target": "_blank"
    },
    {
        "name": "相册",
        "feather": "image",
        "link": "https://blog.iletter.top/index.php/category/image/",
        "target": "_self"
    },
    {
        "name": "分类",
        "feather": "layout",
        "sub": [
            {
                "name": "随笔",
                "feather": "edit",
                "target": "_self",
                "link": "https://blog.iletter.top/index.php/category/sui-bi/"
            },
            {
                "name": "技术笔记",
                "feather": "monitor",
                "target": "_self",
                "link": "https://blog.iletter.top/index.php/category/ji-shu-bi-ji/"
            },
            {
                "name": "文章收藏",
                "feather": "scissors",
                "target": "_self",
                "link": "https://blog.iletter.top/index.php/category/wen-zhang/"
            }
        ]
    },
    {
        "name": "归档",
        "feather": "archive",
        "link": "https://blog.iletter.top/index.php/archive.html",
        "target": "_self"
    },
    {
        "name": "时光机",
        "feather": "clock",
        "link": "https://blog.iletter.top/index.php/cross.html",
        "target": "_self"
    },
    {
        "name": "友人帐",
        "feather": "users",
        "link": "https://blog.iletter.top/index.php/links.html",
        "target": "_self"
    },
    {
        "name": "关于我",
        "feather": "coffee",
        "link": "https://blog.iletter.top/index.php/start-page.html",
        "target": "_self"
    }
]

uni-app微信小程序属性为0

2024-06-04T23:52:00+08:00

前几日在封装一个组件的时候，接收数据的时候遇到一个属性等于0，但是，前端死活不显示

这里是有值的，但

到了前端就没有了，卧槽，太神奇了是不是。打印一下看看

打印出来传入值竟然是undefined而不是0，一定是闹鬼了。。。

最后再不断定位错误的时候，发现是这里的毛病

post: item.post || '', // 添加 post 属性，默认值为空字符串

原因是当数值为0的时候自己就默认是false

0在布尔上下文中被认为是假值，因此 item.post||‘’ 会在 item.post 为 0 时返回空字符串。所以说为了保留0，需要改成

 item.post !== undefined ? item.post : ''

来确保仅在 item.post 是 undefined 时返回空字符串。

下面贴一下源代码

前端实现div的高度拖拽改变

2023-11-03T23:49:00+08:00

实现代码

html

script

dragEagle(e) {
            var targetDiv = document.getElementById('fuDiv');
            //得到点击时该地图容器的宽高：
            var targetDivHeight = targetDiv.offsetHeight;
            var startX = e.clientX;
            var startY = e.clientY;
            document.onmousemove = function (e) {
                e.preventDefault();
                //得到鼠标拖动的宽高距离：取绝对值
                var distY = Math.abs(e.clientY - startY);

                //往上方拖动：
                if (e.clientY < startY) {
                    targetDiv.style.height = (targetDivHeight + distY) + 'px';
                }

                //往下方拖动：
                if (e.clientX < startX && e.clientY > startY) {
                    targetDiv.style.height = targetDivHeight - distY + 'px';
                }

                if (parseInt(targetDiv.style.height) >= 800) {
                    targetDiv.style.height = 800 + 'px';
                }
                if (parseInt(targetDiv.style.height) <= 320) {
                    targetDiv.style.height = 320 + 'px';
                }
            }
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        },

css

.contactPerson_bottom_div {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top-style: solid;
    border-color: black;
    background: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    z-index: 99;
    height: 320px;
    overflow-y: auto;/* 允许垂直滚动 */
}
.dragDiv{
     height:10px;
    display: flex; 
    align-items: center; 
    justify-content: center;   
}
.dragDiv:hover {
    /* background-color: #666; */
    cursor: pointer;/* 在hover的时候，鼠标指针变成手 */
}

首先针对需要设置的div添加一个id，再通过getElementById获取到目标div。

然后在内部添加一个div，可以设置成自己想要的形式，做明显的标记使用。针对这个div设置操作活动@mousedown。也就是当鼠标按下去的时候调用此dragEagle方法，在此之前一定要传入对象参数e。

var targetDivHeight = targetDiv.offsetHeight;: 这行代码获取了目标 div 元素的当前高度，并将其存储在 targetDivHeight 变量中。

var startX = e.clientX; 和 var startY = e.clientY;: 这两行代码分别记录了鼠标点击位置的横坐标（X坐标）和纵坐标（Y坐标），用于后续计算鼠标拖动的距离。

document.onmousemove = function (e) { ... }: 这是一个鼠标移动事件处理程序，当用户按住鼠标左键并移动时，会触发这个事件处理程序。在这个处理程序中，计算了鼠标拖动的距离，并根据拖动的方向来改变目标 div 元素的高度。

e.preventDefault();: 这一行代码用于防止浏览器默认的拖拽行为，确保我们自己的逻辑生效。
通过比较鼠标当前的 e.clientY 和初始点击时的 startY 来计算垂直方向上的拖动距离 distY。
接下来的条件判断分别处理向上拖动和向下拖动的情况。如果鼠标向上拖动，就增加目标 div 的高度，如果鼠标向下拖动，就减小目标 div 的高度。这样可以实现调整高度的效果。
最后的两个条件判断用于限制目标 div 的最小和最大高度，以避免高度超出一定范围

document.onmouseup = function () { ... }: 这是鼠标释放事件处理程序，在鼠标左键释放时触发。它用于清除鼠标移动事件处理程序，即当鼠标释放后停止拖动。

在这之中

                if (parseInt(targetDiv.style.height) >= 800) {
                    targetDiv.style.height = 800 + 'px';
                }
                if (parseInt(targetDiv.style.height) <= 320) {
                    targetDiv.style.height = 320 + 'px';
                }

这一段是限制div拖动的最大高度和最小高度

vue3无关系组件之间的方法调用

2023-07-30T23:48:00+08:00

要实现在第一个页面中的方法 onClick 调用第二个页面中的 updateBankToUser 方法，我们可以使用事件总线来实现跨组件通信。在Vue 3中，我们可以使用 mitt 库来创建事件总线。

首先，安装 mitt 库：

npm install mitt

然后，我们可以创建一个全局的事件总线，并在第二个页面中将 updateBankToUser 方法注册为一个事件处理程序，然后在第一个页面的 onClick 方法中触发这个事件，从而调用第二个页面中的方法。

以下是示例代码：

创建全局事件总线 bus.ts：

// bus.ts
import mitt from 'mitt';

export const bus = mitt();

第二个页面 user.vue：

第一个页面 parent.vue：

在这个示例中，我们在 bus.ts 中创建了一个全局事件总线 bus。然后在第二个页面 user.vue 中，我们将 updateBankToUser 方法注册为名为 'callUpdateBankToUser' 的事件处理程序。在第一个页面 parent.vue 中的 onClick 方法中，我们使用 bus.emit 触发了 'callUpdateBankToUser' 事件，从而调用了第二个页面中的 updateBankToUser 方法。

通过这种方式，您可以在不直接引用第二个页面的情况下，实现跨组件调用其中的方法。

什么是全局事件总线bus.ts import mitt from 'mitt'; export const bus = mitt(); 两行的作用是啥

在这里，bus.ts 文件中的两行代码用来创建全局事件总线。全局事件总线是一个简单的事件管理器，它可以用于在应用程序中实现组件之间的通信，特别是当组件之间没有直接父子关系时。

具体来说，这两行代码的作用是：

import mitt from 'mitt';: 这里我们导入了 mitt 库，它是一个简单、小巧的 JavaScript 事件库。mitt 库允许我们创建事件总线，以便在应用程序的任何地方都可以访问该事件总线。
export const bus = mitt();: 在这里，我们创建了一个全局的事件总线 bus 并将其导出。通过 mitt() 调用，我们创建了一个新的事件总线实例，可以用来管理事件的注册、触发和取消。

总结起来，bus.ts 文件中的这两行代码的目的是创建一个全局的事件总线，以便在应用程序的任何地方都可以使用它进行组件之间的通信。通过这个全局事件总线，我们可以在不直接引用其他组件的情况下，实现组件之间的方法调用和数据传递。

前端实现时间刷新

2023-05-24T23:48:00+08:00

前端实现个时间刷新的案例：

script

const updateTime = () => {
  const currentDate = new Date();
  const year = String(currentDate.getFullYear());
  const month = String(currentDate.getMonth() + 1).padStart(2, '0');
  const date = String(currentDate.getDate()).padStart(2, '0');
  const hours = String(currentDate.getHours()).padStart(2, '0');
  const minutes = String(currentDate.getMinutes()).padStart(2, '0');
  const seconds = String(currentDate.getSeconds()).padStart(2, '0');
  dataForm.currentTime = `${year}年${month}月${date}日  ${hours}:${minutes}:${seconds}`;
};

这里主要调用的是 Date();的前端的方法。

然后我们设置定时器一秒刷新一次。

setInterval(() => {
  updateTime();
}, 1000);

这是根据人人开源项目做二次开发写的，其实二次开发真的有些难受。

如果要根据vue的方式来写就是这样的

在mounted生命周期钩子中，我们通过调用updateTime方法来初始化时间，并使用setInterval函数每秒钟更新一次时间。

updateTime方法会获取当前时间并更新currentTime的值，然后将其显示在页面中。

getYear方法返回的是四位数的年份，getMonth方法返回的是从0开始的月份（需要加1），getDate方法返回的是月份中的日期。我们将它们转换为字符串并使用padStart方法进行补零操作，以保证两位数的格式。

最后，我们将年、月、日、时、分和秒拼接为一个完整的日期时间字符串，并将其赋值给currentTime，用于在页面中显示。

其中有个点就是在获取日期时，getDay()方法返回的是星期几（0-6），而不是日期。今天就犯糊涂了，用了getday()

另外推荐一个很好的拟态风格的css生成网站，简直不要太好用！！！！

https://neumorphism.io/#e0e0e0

关于vue，ts，echart整合显示地图的实现方式

2023-05-24T23:48:00+08:00

这两天需要做一个大屏的东西，看着网上那个地图的效果很酷很炫，所以想整一个这样的东西，话不多说，开始整。因为项目本体是人人开源项目，我是在这个基础上做的一个二次开发吧。后端代码就省略了。其实很简单。在此就不会做太多的赘述了。

后端

不过有一个点是可以关注的，就是当你的数据库过于庞大的话，我们可以建一个缓存。也就是一下的示例代码。

2023年5月25日：针对这个数据，因为map里面是放到缓存中了，一直没有释放，所以改用redis，又因为这个是二次开发的项目，所以人家对redis进行了一系列的改造，我在自己新建redis配置类的时候一直报错有冲突，所以在看了一下结构之后，对后端的代码进行了一系列的重构。

redis工具类

用于从 Redis 中获取缓存数据或者将数据存入 Redis


    public List getListFromRedis(String key) {
        Object cachedData = get(key);
        if (cachedData != null) {
            // 如果缓存中存在数据，则将其转换为 List 对象并返回
            return (List) cachedData;
        } else {
            // 如果缓存中不存在数据，则返回空列表
            return new ArrayList<>();
        }
    }
    public void setListToRedis(String key, List data, long expire) {
        set(key, data, expire);
    }

控制层

修改 getEnterpriseNums 方法，以先从 Redis 中获取数据，如果缓存中存在数据，则直接返回；如果缓存中不存在数据，则从数据库中获取数据，并将其存入 Redis 缓存中

    @Autowired
    private RedisUtils redisUtils;
    @GetMapping("/enterpriseNums")
    @ApiOperation("返回地图上的区域数据")
    public Result getEnterpriseNums(){
//        List enterpriseDetailsList = enterpriseDetailsService.getEnterpriseNums();
//        return  new Result().ok(enterpriseDetailsList);
        String redisKey = "enterpriseNums"; // 定义 Redis 缓存的键名
        List enterpriseDetailsList = redisUtils.getListFromRedis(redisKey);
        if (enterpriseDetailsList.isEmpty()) {
            // 从数据库中获取数据
            enterpriseDetailsList = enterpriseDetailsService.getEnterpriseNums();
            // 将数据存入 Redis 缓存，设置过期时间为一小时
            redisUtils.setListToRedis(redisKey, enterpriseDetailsList, RedisUtils.HOUR_ONE_EXPIRE);
        }
        return new Result().ok(enterpriseDetailsList);
    }

首先从 showEnterpriseDetailsServicesCache 缓存中获取工厂信息列表数据。如果列表数据为空（即缓存中没有数据），则调用 enterpriseDetailsService.getEnterpriseNums() 方法获取工厂信息数据，并将其存入缓存中。在下次调用 getEnterpriseNums() 方法时，将直接从缓存中获取数据，避免了重复查询的开销。

通过以上优化，当第一次请求 getEnterpriseNums 接口时，数据将从数据库中获取，并存入 Redis 缓存中。之后的请求将直接从 Redis 缓存中获取数据，从而提高响应速度和性能。请确保 Redis 配置正确，并已经启动了 Redis 服务。

前端

echarts示例：https://echarts.apache.org/examples/zh/editor.html?c=map-HK

他给的示例我们可以分析出来，我觉得是通过ajax请求来把地图搞到，然后绑定map最后，把数据显示出来。$.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson)用于异步加载地图数据。这段代码的作用是通过 AJAX 请求获取名为 'HK.json' 的地图数据文件，然后在成功获取数据后，使用echarts.registerMap('HK', geoJson)将地图数据注册到 ECharts 中，并命名为 'HK'。这样，之后在配置地图的 series 中就可以通过指定 map: 'HK'` 来使用该地图数据。

再者我们需要提前的把地图数据导入到项目当中来。可以通过这个平台下载地图的数据

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

然后的话导入方式，因为项目的原因我们需要这样做，

先是import

import jiNanMapJson from "src/views/enterprise/assets/json/济南市.json";

import * as echarts from "echarts";

再然后注册地图数据到 ECharts：

echarts.registerMap('jiNan', jiNanMapJson);

更新 mapOption 中的 series 配置，将 map: 'HK' 添加到相关的地图系列中，以便使用注册的地图数据：

const mapOption = ref({
  // ...其他配置项
  series: [
    {
      // ...其他系列配置
      map: 'jiNan', // 使用注册的地图数据
      // ...其他系列配置
    }
  ]
});

通过这种方式，我们可以注册到其中，完整代码如下：

最终实现效果可参考echarts的案例。

前端点击链接使用新建窗口打开外部链接

2023-05-12T23:48:00+08:00

方法一：

我们可以使用a标签的属性来实现新建窗口跳转

其中target有以下几种属性

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

方法二：

我们可以使用js脚本来配合跳转

html部分

点击此处实现跳转

js部分

See (e) {
        window.location.href = e
      }

其中url也就是你的传入值。

在这里面说明一下，你的链接在写的时候，必须带上http://或者https://如果不带的话，vue会自动识别为路由的

白荼日记 - 前端

typecho给后台admin界面添加图标分析

去除宝塔界面一些烦人的东西

nvm命令自查（node版本管理）

typecho的handsome主题微调

取消归档页面的文章目录

去除掉友情链接的内页链接

左侧边栏导航 配置

uni-app微信小程序属性为0

前端实现div的高度拖拽改变

html

script

css

vue3无关系组件之间的方法调用

什么是全局事件总线bus.ts import mitt from 'mitt'; export const bus = mitt(); 两行的作用是啥

前端实现时间刷新

标签

script

关于vue，ts，echart整合显示地图的实现方式

后端

redis工具类

控制层

前端

前端点击链接使用新建窗口打开外部链接

左侧边栏导航配置