![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 80
solocoder222
热爱开源,喜欢折腾的创业型全栈工程师。
展开
-
前端复杂表格导出excel,一键导出 Antd Table 看这篇就够了(附源码)
前端导出 excel 的需求很多,但市面上好用的库并不多,讲明白复杂使用场景的文章更少。本文将以文字 + demo 源码的形式,力求讲清楚满足 99% 使用场景的终极 excel 导出方案。如果项目中用到了 AntD,那就更简单了,因为 Table 本身已经设置好了 column 和 dataSource,只需解析 column 和 dataSource 即可快速导出 Excel。实现功能:简单表格导出为表格添加样式(更改背景色、更换字体、字号、颜色)设置行高、列宽解析 ant-design原创 2022-03-29 10:21:45 · 7251 阅读 · 6 评论 -
前端提效 - js 批量导出 excel 为zip压缩包
本篇文章主要介绍使用 exceljs、file-saver、jszip实现下载包含多层级文件夹、多个 excel、每个 excel 支持多个 sheet 的 zip 压缩包。上一篇文章:前端复杂表格导出excel,一键导出 Antd Table 看这篇就够了(附源码)详细介绍了如何实现解析 Antd Table、组装数据和调整表格的样式,感兴趣的可以先看看。本篇将接着上一篇,重点讲方法的更高级抽象,和下载多层级文件夹的 zip 压缩包。源码地址:https://github.com/cachecats/ex原创 2022-03-29 10:19:19 · 3355 阅读 · 0 评论 -
100 行代码实现 Flutter 自定义 TabBar
Flutter 的确很强大,但美中不足的是生态还有待完善,没有出现像前端的 Antd 或 Element 那样全能的基础 UI 库。由此带来的直接影响是开发效率提不上去,需要耗费大量的时间精力在基础组件的封装上。官方的 TabBar 不满足需求,又没有合适的轮子,只好自己造轮子啦。接下来带你一步步实现自定义 TabBar……一、目标和效果需求目标是:这个页面不要 material 左侧统一的返回键和 Title在右侧有取消按钮,点取消即返回点击 Tab 可以实现 content 切换并带有动原创 2020-09-26 15:02:45 · 1141 阅读 · 0 评论 -
前端面试必备技巧(二)重难点梳理
针对面试中出镜率比较高的重难点知识梳理。相比于第一篇 前端面试必备技巧,本篇文章更贴合今年的面试实际。第一篇比较全面,也比较基础,建议先看一遍上一篇再看本篇会更容易理解。一、ES6常见用法关于 ES6(泛指 ECMAScript 2015 及以后的版本)几乎是面试必问的,一般的问法是:“平常会使用 ES6 吗?列举几个 ES6 的用法”。回答出来三四个就差不多了,但回答的每一个都要弄清楚,有的面试官会延伸着追问。如果时间充足,还是建议看看 阮一峰的 ES6 入门教程 。1.1 let 和 c原创 2020-06-05 15:37:40 · 1228 阅读 · 0 评论 -
2020前端面试必备技巧
2020最全的前端面试指南,一个多月 1.8w 字的面试经验积累,凭借它最终成功入职大厂……今年的金三银四刚好赶上疫情,很多大公司都停止招聘甚至裁员,想跳槽的小伙伴被打的措手不及。需求减少要求肯定随之提高,谨以此面经献给在如此艰难之时逆风而动、勇敢坚强的你~与面试贴合度更高的 前端面试必备技巧(二)重难点梳理 整理好啦,两篇文章结合起来看效果更佳~前言今年问的难度和深度应该比前几年有所增加,下面从总体分析和重要点两个维度来分析一下:总体分析前端问的最多的还是 js基础、计算机网络基础等,建议原创 2020-06-05 15:35:06 · 948 阅读 · 0 评论 -
Vue 图片压缩并上传至服务器
本文主要讲解基于 Vue + Vant ,实现移动端图片选择,并用 Canvas 压缩图片,最后上传至服务器。还会封装一个工具类,方便直接调用。一、工具类封装废话不多说先上代码,封装一个 CompressImageUtils 工具类:/** * 图片压缩工具类 * 最大高度和最大宽度都为 500,如果超出大小将等比例缩放。 * * 注意可能出现压缩后比原图更大的情况,在调用...原创 2020-01-15 11:12:23 · 2100 阅读 · 0 评论 -
基于 Vue 的移动端富文本编辑器 vue-quill-editor 实战
优秀的富文本编辑器有很多,比如:UEditor,wangEditor 等,但并不是每个都能在移动端有很好的表现。我们暂且不讨论移动端是否真的需要富文本,既然有这需求,就把它实现出来。失败的尝试正确的选择是成功的开始,开发之前肯定要做一些调研。通过各种资料搜集,确定了几个备选的:UEditor,vue-quill-editor,wangEditor,vue-html5-editor ,tin...原创 2019-05-27 11:55:16 · 5937 阅读 · 2 评论 -
用 moment 实现获取本周、前 n 周、后 n 周开始结束日期
本文用 moment.js 实现了获取本周、前 n 周、后 n 周开始结束日期,即周一、周日日期的方法。先看代码,封装了个工具类 DateTimeUtils.js,可以直接复制到项目中使用/** * 时间日期工具类 */import moment from 'moment'export default { /** * 获取本周周一和周日日期 */ getCurre...原创 2019-04-19 15:20:02 · 8710 阅读 · 0 评论 -
Vue-cli3 项目在安卓低版本系统和 IE 上白屏问题解决
最近遇到一个问题,用 Vue 开发的项目在最近两年新出的安卓手机上没问题,在三四年前的旧手机上出现白屏问题。分析一下应该是安卓系统版本的原因,目前已知的是Android 6.0 以上都 OK,6.0 以下就不行了。低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性,所以报错。但在手机上调试不方便,受一篇文章的启发, IE 浏览器也是同样的问题,所以可以在 IE 上调试,一个调...原创 2019-04-13 21:03:45 · 3676 阅读 · 0 评论 -
Vue 返回记住滚动条位置详解
最近用 Vue 做移动端页面遇到一个问题,从列表页进入详情页,再返回到列表页,不管之前滚动到哪里,每次返回时都跳到列表最顶部。这样体验肯定不好,期望的应该是记住滚动条的位置,每次返回还是在原来的位置上,便于继续浏览。于是在网上搜解决方法,搜了一大圈看了 n 篇文章,都没有说清楚。起码我是没有通过看一篇文章而完美解决,所以决定写一篇详细的亲测可行的解决方案。一共分三步:给 router-v...原创 2019-03-04 16:49:49 · 24251 阅读 · 6 评论 -
Android原生同步登录状态到H5网页避免二次登录
本文解决的问题是目前流行的 Android/IOS 原生应用内嵌 WebView 网页时,原生与H5页面登录状态的同步。大多数混合开发应用的登录都是在原生页面中,这就牵扯到一个问题,如何把登录状态传给H5页面呢?总不能打开网页时再从网页中登录一次系统吧… 两边登录状态的同步是必须的。100 多位经验丰富的开发者参与,在 Github 上获得了近 1000 个 star 的全栈全平台开源项目想...原创 2019-03-14 14:52:51 · 3548 阅读 · 0 评论 -
Vue 开发经验小记
使用 vue 开发过程中遇到的问题或知识点总结,持续更新中…1.国际化国际化插件:vue-i18n2.让多行内容显示一行,多余的用…表示white-space : nowrapoverflow: hiddentext-overflow : ellipsis3.显示宽高相等的图片,宽度为屏幕宽度,高度与宽度相等<div class="image-header"> &...原创 2019-03-05 11:28:47 · 237 阅读 · 0 评论 -
你想要的全平台全栈开源项目 - PC(Vue、React)、移动H5(Vue、React)、小程序、Android原生、ReactNative、java后端
全平台全栈开源项目 coderiver 今天终于开始前后端联调了~首先感谢大家的支持,coderiver 在 GitHub 上开源两周,获得了 54 个 Star,9 个 Fork,5 个 Watch。这些鼓励和认可也更加坚定了我继续写下去的决心~ 再次感谢各位大佬!项目地址: https://github.com/cachecats/coderiver靠业余时间从产品立项,到画原型图设计...原创 2018-11-19 16:59:40 · 874 阅读 · 0 评论 -
Vue + Mint-ui 封装滚轮选择器
Mint-ui 是个非常不错的 UI 框架,提供了很多组件。但在项目中实际使用的时候,还需要将几个组件组合起来使用。比如要实现 App 中常见的滚轮选择器,需要将 Popup 和 Picker 组合起来,并根据项目的 UI 效果做一定的定制。下面将用 Popup + Picker 定制一个带确定取消按钮的滚轮选择器。封装布局很简单,外层套一个 <mt-popup>,上面是...原创 2018-09-21 09:42:49 · 2661 阅读 · 0 评论 -
Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。本文将对这两种情况分别讲解,H5 端用 vue 实现。一、前期准备(Vue项目准备)本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令行看到两个地址:http://localhost:8080/ ...原创 2018-08-22 17:43:08 · 14736 阅读 · 3 评论 -
element-ui 的Dialog被蒙板遮住原因及解决办法
用 element-ui 时遇到一个问题,弹出的 dialog本来应该在半透明蒙板上层显示,但不知怎么跑到了蒙板下面,被遮住了。查了一些资料,得知如果 Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时,就会出现被蒙板遮住的情况。解决办法很简单,查看 element 的 官方文档在 el-dialog 标签里添加下面两...原创 2018-07-06 09:58:13 · 18577 阅读 · 11 评论 -
vue + element-ui + scss 仿简书评论模块
一、前言最近开发项目需要用到评论模块,参考了多家平台,对比之后觉得简书的最漂亮,就它了。前端当然要先放图简书原图注意评论的输入框默认是隐藏的,点击回复才会显示出来本篇文章实现的效果同样输入框需要点击回复才会显示二、功能分析从 UI 上看,整个评论模块大致分为四个版块评论人信息。包括头像,昵称,评论时间 评论的内容。包括文字内容,赞的个数和回复按钮他人...原创 2018-07-08 21:56:15 · 14070 阅读 · 26 评论