当前标签:Vue.js, 共9篇文章
ElementUI表格el-table表头固定自适应高度解决方案
el-table的height属性可以方便地实现表格固定,但是这个值该设置为多少以适配屏幕大小呢?设置过小,则可能出现可视区域内有空白位置,但是表格内却出现滚动条;设置过大,则在一些小屏幕设备上浏览时,页面本身和表格内部都可能会出现滚动条。两种情况体验都是极差的,为了解决这个问题,我们需要动态地计算页面空白区域的高度,然后设置到height属性,即根据页面大小,动态计算height属性。
axios请求失败自动重发
在做Vue、React项目的时候常会用axios请求库来与后端进行数据交互。我们通常采用一个用户凭证token来验证用户身份,服务器根据token进行判断当前用户是否有权限调用接口。经常遇到的一个问题是,调用接口时token可能已经过期,此时调用接口会失败,需要重新登录后再调用接口。通常我们可能处理为,用户走完登录流程后再重新手动触发一次请求。这样的实现本身没什么问题,但是给用户的操作体验上有被中断的感觉,本文尝试解决了一下这个问题。
svg实现环形进度条
环形进度条虽然很常用,但基本都是直接用各种组件库来搞,所以在此之前也没有自己真正实现过。偶然思考了以下这个问题,直接用CSS的话,好像还不太好实现,所以看了下svg实现的方案,也趁机熟悉一下svg——svg实现环形进度环出乎意料的简单。
Vue项目打包压缩:让页面更快响应
自己做测试用的一个小项目,虽然仅有三四个页面,因为服务器带宽太小了,加载时间过长的问题尤为明显,于是采用了路由懒加载和gzip压缩的方式优化了一下,访问速度得到了显著提升。
Vue项目打包部署总结
使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。Vue项目打包部署本身不复杂,不过一些前端同学可能对服务器接触不多,部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题。
Vue关键词搜索高亮
本文基于Vue实现了在页面中搜索关键词,并且实现仿浏览器搜索结果的的高亮展示。同时将关键词搜索高亮组件vue-search-highlight发布到了npm,可以在Vue项目中直接安装使用。
Vue关键词搜索高亮
文章页面目录自动生成方案
前两天项目遇到一个需要给页面添加大纲导航的功能,要求把页面中的标题加入到大纲导航中。需求本身并不难,不过想把这个东西做得通用一些,也就是以后再有别的页面需要加导航,不用再重新写很复杂的逻辑了。本文说一下具体实现思路,并且文末会给出简便易用的导航生成工具。
文章页面目录自动生成方案