在Vue实现一个画廊页面中出现了一个问题，即img标签导入的图片在排版时，在margin、padding、border等属性都不存在的情况下，下方仍然出现了空行。为了探寻这一情况的原因和解决方案做了一系列的研究。问题示例如下所示，在图片的下方存在着一个空行，使得外层div的边框没能完整地贴合图片。 成因 首先我们要理解的是文本的渲染逻辑。 文本在渲染过程中，会将文本放置在baseline上，而下

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

实现多个渐变色叠加的边框 如何实现下面这个由两个渐变色叠加的边框效果： 对于单个渐变色的边框可以用border-image轻松实现 1234567.border-image-demo{ margin: 10px 0; width: 200px; height: 100px; border: 2px solid; border-image: linear-gradient(13

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

ECharts的Tooltip不显示原因 问题 在使用ECharts添加Tooltip的时候发现浮窗不显示，但其辅助线可以正常显示，网上查到的原因都说的是Vue的代理问题，不能将Echarts实例定义为ref或reactive对象，但我在代码里并没有将其定义为ref对象，且用上makeRow等方法后仍然不显示提示框。如下所示。 HTML结构检查 出现了问题首先查看控制台，发现没有报错，便去查看H

实现一个能够鼠标移动的Tooltip，在里面显示一些信息，并且可以进入以进行进一步的互动操作。 基础实现 首先定义一个背景图，当鼠标在背景图中移动的时候，Tooltip显示在鼠标的右下角，并显示当前鼠标在背景图中的坐标。 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

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

实现一个门票、卡券样式的卡片，涉及到mask-image,drop-shadow,radial-gradient等属性的学习与使用

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

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