实现一个能够鼠标移动的Tooltip，在里面显示一些信息，并且可以进入以进行进一步的互动操作。 基础实现 首先定义一个背景图，当鼠标在背景图中移动的时候，Tooltip显示在鼠标的右下角，并显示当前鼠标在背景图中的坐标。 vue !-- 1. 定义一个包裹的容器，并将其position设置为relative 2. 在背景图中设置样式，并添加mousemove的事件监听器，当鼠标在背景图中移动的时候，实时更新数据 3. 设置tooltip的显示内容和样式，并通过style标签动态绑定其

为了能够通过像UI库的图标组件一样，通过name='icon-name'的形式来引入自己的图标，而不是通过img标签的src属性写长长一串地址，所以通过svg sprite图来进行实现。 原理 svg sprite图的实现原理是利用svg的symbol元素，将每个icon包裹在symbol中，再通过svg的use标签来使用该symbol，也就是最终，svg图标会变成如下的样子 xml svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink=

实现一个门票、卡券样式的卡片，涉及到mask-image,drop-shadow,radial-gradient等属性的学习与使用 !--more-- 实现一个门票、卡券样式的卡片，其样式如下所示： !(https://images.starnight.top/img/20240620214016.png) 可以发现这个样式以虚线为界分为左右两个部分，左侧显示图片，右侧显示一些详细信息，其中右上角还有一个三角模块显示当前状态。 基础布局 左侧的图片，右侧的详细信息布局都可以轻松完成

实现一个简单的目录功能，当点击目录按钮时能够跳转到对应的标题，并高亮显示当前选中的目录，同时对页面滚动进行监听，在页面滚动到标题时同样高亮对应的目录按钮。 布局 首先将页面分为左右两个部分，因为左侧为目录且固定在页面中，所以设置为fixed，右侧则为内容部分，为不与目录重叠，添加margin值来空出位置。 !(https://images.starnight.top/img/20240620213650.png) 跳转标题 由于在布局中，给不同的段落设置了对应的id，在按钮的点击事件

出现问题 在将Vue项目部署到服务器后发现在访问页面的时候只能访问默认页面和通过项目内跳转其他页面，如果直接通过地址访问就会出现404 Not Found而在本地Vue项目运行时直接通过地址访问并没有出错，说明问题不在Route而是在Nginx服务器的设置中 解决方案 在原本的Nginx配置中，设置的内容如下： location / { root /usr/share/nginx/html; index dist/index.html; } 直接理解就是当访问根地址/时，跳转

问题 有字符串“../../img/example.jpg”，想要提取出文件名example，使用js代码replace替换../../img/，再使用substring提取文件名时出现问题 js const str = '../../img/example.jpg' console.log(str.replace('../../img/','')).substring(0,str.lastIndexOf('.')) // example.jpg 无法去除后缀名，而当两者分开使用时可以正常出