ECharts的Tooltip不显示原因 问题 在使用ECharts添加Tooltip的时候发现**浮窗不显示，但其辅助线可以正常显示**，网上查到的原因都说的是Vue的代理问题，不能将Echarts实例定义为ref或reactive对象，但我在代码里并没有将其定义为ref对象，且用上makeRow等方法后仍然不显示提示框。如下所示。 !(https://images.starnight.top/img/2cf41d75d3cbd1589193ad65bf92960.jpg) HTM

问题 有字符串“../../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 无法去除后缀名，而当两者分开使用时可以正常出

背景 数据库存储有这类JSON数据，希望在输出时将每个子项都单独输出并根据key值重命名 json softtissue:{ nasalBase:{ Col_Sn_Ls:null, N_Prn_Sn:null, ZyR_Prn_ZyL:null, Sn_N_Pg:null, A_NPg:null, Col_Sn:null, Prn_Sn:null, AIR_AIL:null, AcR_AcL:null, other:"" }, upperLipAn

场景描述 在Vue的data中定义了一个对象，在将该对象传输给后端时需要做一些修改，因此新建了一个对象让他等于该对象，之后对新建的对象进行修改，此时会导致原有对象的属性也会改变。 **显示的页面** html template p 姓名：{{user.name}} /p p 年龄：{{user.age}} /p button @click="update" 复制对象，修改内容 /button /template **JS** javas

使用Vue实现一个简单的瀑布流画廊页面demo，图片简单地从assets目录下读取并在页面进行展示，在这过程中遇到了一些问题进行一下记录。 Vite读取assets目录下的文件 在webpack中可以通过require.context方法来读取目录下的所有文件 其具体用法为 js require.context(directory,useSubdirectories,regExp) directory: 要搜索的目录 useSubdirectories：是否要搜索子目录 re

官网实现方法 Vue官网(组件 v-model | Vue.js (vuejs.org)(https://cn.vuejs.org/guide/components/v-model.html))提供了跨组件间使用v-model进行双向绑定的方法 html !--父组件-- CustomInput v-model:"inputText" / !--子组件-- script export default { props: 'modelValue', emits: 'update:mo

在由选项式API转向组合式API时，发现响应式数据的定义往往通过ref来实现，但是直接定义变量的方式也能够在页面中实现显示，而后又有readonly来进行变量定义的方式，因此实验了一下其中的区别。 自定义变量 使用自定义变量时直接进行定义即可let customVal:number = 10 1. 自定义变量的值可以直接在模板中显示（包括文本和输入框等） 2. 点击按钮改变自定义变量的值时，后台数据会发生变化，但页面不会刷新，即显示的还是原来的值 3. 通过输入框改变值时（v-model绑定

web展示图片出现锯齿 现象 在页面中使用img标签展示图片时，发现图片会出现锯齿，严重影响观感。一开始怀疑会不会是img标签的问题，在改用div标签并设置background-image后发现仍然存在这个问题。 在对css的各个属性进行测试的时候发现，当去除object-fit:cover属性（同理background-size:cover属性）时，图片就不会有锯齿，但是这样图片的大小尺寸就不对，无法显示成预期的大小。 !(https://images.starnight.top/

使用ECharts和G2实现图表 在网页上常用的图表显示框架有ECharts、G2等，通过使用ECharts和G2实现相同效果的双折线带面积的图表来学习其用法。 ECharts ECharts绘制图表通过设置options来实现，并通过setOption来应用配置项，同时实现图表的更新。 安装ECharts shell npm install echarts 获取容器 首先在template中准备一个定义了宽高的DOM容器，并通过ref创建引用，在script中定义该引用

在Vue实现一个画廊页面(https://starnight.top/2024/08/10/Vue实现一个画廊页面/)中出现了一个问题，即img标签导入的图片在排版时，在margin、padding、border等属性都不存在的情况下，下方仍然出现了空行。为了探寻这一情况的原因和解决方案做了一系列的研究。问题示例如下所示，在图片的下方存在着一个空行，使得外层div的边框没能完整地贴合图片。 !(https://images.starnight.top/img/Pasted%20image%202

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

实现多个渐变色叠加的边框 如何实现下面这个由两个渐变色叠加的边框效果： !(https://images.starnight.top/img/aec5805e03422bd0b42c52f56efc040.jpg) 对于单个渐变色的边框可以用border-image轻松实现 css .border-image-demo{ margin: 10px 0; width: 200px; height: 100px; border: 2px solid; border-im

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

实现一个能够鼠标移动的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=