- 博客(25)
- 收藏
- 关注
RSS订阅原创 vue基于 inheritAttrs进行组件二次封装
曾经，我在封装ui库的组件时都是这样的：element的table组件，冗长的自定义属性然后为了能够使代码更简洁，同时能在父组件随意传入自定义的属性，我设想过使用jsx，因为我见过公司有react项目，里面使用了扩展运算符来传入元素的属性，可惜当时试了一下在vue的render里面这么用结果失败了。直到今天我在浏览文章的时候偶然发现了一个在vue里面我从未使用过的知识点：inheri...
2021-11-22 17:30:27
96
原创 切换主题功能初尝试
近期的项目有一个切换主题的需求，其实这个功能我很早就想研究一下了，只是没有项目驱动一直懒得动，这次就借工作当中的项目趟了一遍河。切换主题主要分为三个方面：1.element等UI库的主题切换。2.echarts的主题切换。3.自己写的样式实现主题切换。下面就一一说明实现过程。element主题切换1. 统一处理前往在线主题生成工具编辑好主题然后导出。然后使用gulp完成类名前缀批量添加，通过...
2021-10-03 11:37:47
130
原创 实现小球碰撞动画
前言小球碰撞的动画效果早在17年做一个大屏项目的时候就用过，最近的项目又有这个需求，于是乎把这个过程总结一下，省得以后又从网上找。常规方案思路梳理网上的做法大部分都是循环创建一堆dom元素，然后使用随机数设置起点坐标，给小球以x,y方向的初始速度，然后在运动到边界的时候进行判断并转向，还可以判断小球之间是否发生碰撞，最后设置定时器使小球不间断的运动(改变css属性)。基于vue的代码实现(...
2021-03-20 18:02:42
297
原创 如何快速完成css动画
先上结论，主要用到offset-path和offset-distance，这两个属性目前Safari和IE不支持，如果对兼容性要求不高的话可以使用本文介绍的这种方法。完成动画的几种主要方法使用css3的transition或者animation再结合如width，height，top，left，或者translate这类的的css属性，也就是我们说的“手写动画”。使用js引擎完成。如thr...
2021-02-20 17:59:17
116
原创 G6关系图隐藏节点算法探究
最近遇到一个需求：在一个关系图上进行特定节点的隐藏，并生成新的关系图。项目里面用的可视化框架是g6，然后我去g6的文档里面搜索了一下“数据过滤”，好家伙，出现了一个左侧目录里面根本不存在的页面，而且并没有任何代码讲解，只是在介绍一个项目，不知道这个项目是曾经存在过还是以后将要上线......最后很无奈，不管数据过滤这个功能是曾经有还是未来会有，反正当前版本是没找着的，只有自力更生了。关系图基本说...
2020-12-17 21:08:01
471
原创 iview的表格行/列合并
最近的一个项目里面有一个需求是这样的，要实现表格第一列和最后一列相同的内容合并成一格，形成的结果就是多条有相同字段的数据放在表格里面看起来就是一条数据，但是中间的列还是显示每条数据不同的部分。实现的结果如下图相同的班级的数据被合并成一条，实际是4条数据需要页面显示获取到了2条数据而项目用的UI库iview虽然官网上有介绍表格行列合并，但是看完示例之后我是一脸懵逼的，完全就没有说清楚好...
2020-12-15 11:22:29
246
原创 【译】原子设计5——维护设计系统（节选，终章）
因为是最后一章了所以先来一张作者的照片作为开头使设计系统经受住时间的考验人工制品是你在考古挖掘或博物馆中发现的东西，而系统则是活生生的实体。样式指南可以提供文档并作为有用的资源，但是样式指南的简单存在并不能保证基础设计系统的长期成功。设计系统需要不断的维护，支持和贴心的关爱，才能真正蓬勃发展。再次改变主意我们又在做什么？我们认为我们只是设计和构建网站和应用程序。在大多数情况下都...
2020-10-28 20:18:11
124
原创 【译】原子设计4——原子工作流（节选）
人员，流程，实现设计系统说起来都容易。到目前为止，我们一直在谈论。并不是说这不是富有成效的谈话！毕竟，我们已经讨论了模块化思维的重要性，已经学习了精心设计UI设计系统的方法，并且展示了用于创建有效模式库的工具。但是这里是橡胶与道路交汇的地方。我们在这里袖手旁观，并将所有这些理论付诸实践。我们需要把事情做好。本章将介绍销售，创建和维护有效设计系统的所有内容。你准备好了吗？让我们开始吧。It’s...
2020-10-27 16:27:09
63
原创 【译】原子设计3——工具集(节选)
Pattern Lab和有效的样式指南的品质在上一章中，我介绍了用于构建用户界面的原子设计方法。希望你会发现原子设计对于构建UI设计系统是有用的思维模型，但是现在是时候从象牙塔上爬下来，然后将原子设计实际应用于现实世界了。基于模式的设计和开发的基础是模式库(UI库？)，它是构成用户界面的所有UI组件的集中枢纽。正如我们在第1章(参见原子设计1——设计系统)中讨论的那样，模式库的好处很多：他...
2020-10-26 11:39:57
70
原创 【译】原子设计2——原子设计方法论(节选)
原子，分子，组织，模板，页面(Atoms, molecules, organisms, templates, and pages)我对设计界面设计系统的方法论的研究引导我在其他领域和行业中寻找灵感。鉴于我们创造的这个极其复杂的世界，其他领域解决了我们可以学习并适用的类似问题似乎是很自然的。事实证明，其他领域(如工业设计和建筑)的负载已经开发了智能模块化系统，用于制造飞机，轮船和摩天大楼等极为复杂...
2020-10-25 10:05:18
216
原创 【译】原子设计0——简介和前言
原文作者：Brad Frost原文标题：Atomic Design原文地址：https://atomicdesign.bradfrost.com/table-of-contents/也可以在作者的GitHub上提出issues说明：本文所提到的前端设计思想我的公司正有所使用，所以我想翻译学习一下，如有侵权，请联系我删除。另外，这也是我第一次翻译英文技术文章，如有错误，欢迎指正。第一篇文章...
2020-08-16 13:53:18
125
原创 使用echarts做对比图
最近的项目中用到了对比图，为了以后不再到处找资料，特记录下对比图的做法。原理对比图实际上是一组横向的柱状图，以x轴为度量，y轴为维度，与echarts官方给出的示例不同的是，一般x轴左右侧都需要是正值。这样的话可以建立三个坐标系来实现：第一个坐标系对应左侧部分(x轴设置inverse)，第二个坐标系对应右侧部分，两个坐标系均隐藏y轴，第三个坐标系用来显示y轴(y轴一般放在左侧，视情况也可以放右...
2020-06-09 17:50:56
486
原创 flex布局的细节探讨
写这篇文章的缘由随着浏览器的不断升级换代，虽然flex布局已经在开发中很常用了，我也自以为用得很熟练了，但是最近一个关于图片的宽高问题却让我被好好上了一课。详细内容是这样的：做一个左侧是图片，右侧是文字的左右结构，不同于看报或者文章中的文字包围文字，而是标准的左右结构，于是我很自然的选择了flex布局。首先父容器display: flex，里面包含左侧图片和右侧文字，而问题就出在了左侧的图片上，...
2020-04-26 16:14:24
51
原创 vscode使用指北
前言本人曾是一名webstorm使用者，但是前段时间不小心点了升级，结果导致破解失效，然后一顿操作最终把老的版本卸载了，本来想从官网上下个最新版的，没想到官网半天打不开（后来才知道只是网络有点问题），而网上搜索webstorm却出现了好多安利vscode的，加之近半同事都用的vscode开发，一咬牙决定加入vscode的怀抱了。推荐插件vscode和...
2019-04-16 23:03:00
291
原创 从HTML5标签来谈谈标签语义化
本文主要参考MDN中文文档前言标签的语义化是一个老生常谈的问题了，可能很多开发者一直习惯于div+span的开发模式，然后加个css类名来进行区分结构和写样式（没错我一直就是这样做的）。这样一来倒是省事，而且写个class自己也能看懂。另一方面，标签的语义化好处大家都会说，什么利于SEO，利于机器阅读这些。但是，标签语义化还有一个好处，那就是便于项...
2019-02-27 15:27:00
288
原创 tips:使用echarts构建一个半圆环形图
前言大名鼎鼎的echarts中有一些有趣的图表，其中饼图(pie)可以衍生出南丁格尔图(玫瑰图),而改变饼图的内外半径又可以使饼图变成一个圆环图，于是问题来了，怎么生成一个半圆形的圆环图呢？首先我们要了解一下半圆图的特点，一个完整的饼图/环形图展示的是各个部分的占比，而半圆环形图则可以直观的展示出某一项占总量的占比，比如说月度用电量占年度用电量的比例。（...
2019-01-08 15:35:00
8017
原创 初窥vue响应式原理
前言随着vue的使用逐渐深入，偶尔会在项目中发现明明按照文档上面去做了，但是并没有实际效果的情况。或者在使用一些功能的时候发现官方文档上面提供的方法不足以解决问题，之后还得百度或者查api，于是乎我决定慢慢开始由浅入深的了解vue的内部原理，知其然，还得知其所以然，否则每次都是治标不治本。最近参与了一个jQuery项目之后才蓦然发现vue的方便，那么，...
2018-12-16 15:14:00
142
原创 失败狮计划——在localStorage中保存vuex状态
前言最近碰到了这么一个需求变动：在当前页点击一个按钮打开一个新的页签(本来是在当前页通过路由跳转进入一个新的组件)，对于传统jq项目来说这个应该是不费吹灰之力可以实现的，但是对于vue项目来说就要好好斟酌一下了，当时我想到了3种方法来实现：首先，最容易理解的就是构建一个简单的多页应用，即新建一个html入口，不过由于之前没有这样做过，对于要踩哪些坑没有什么把握，同时需要后台进行相关的配置，而...
2018-12-01 11:29:22
283
原创 总结--几种生成唯一id的方法
在开发中偶尔会遇到需要生成唯一id的时候，比如对数组的任意一项进行多次增删改，这时就需要给每一项添加唯一标识符来加以区分。以下便是从网络中搜集而来的各种生成唯一标识的方法，在此总结以供以后查阅。方法1function uuid() { var s = []; var hexDigits = "0123456789abcdef"; ...
2018-11-22 21:09:00
6354
原创 tips：Element-UI对话框与轮播图综合使用
本文首发我的简书最近在做一个pc后台管理系统，其中有一个需求是这样的：在一个图片列表中点击一个图片可以查看大图而且还要左右切换上一张/下一张(轮播图)，因为目前项目中用的ui框架是element-ui，我决定将element中的Dialog对话框和Carousel走马灯结合使用。首先写一个对话框(点击页面上的图片显示对话框)： <el-dialog :visible....
2018-09-25 17:32:20
1179
原创 浅谈video标签在移动端的运用
本文首发我的简书最近在移动端项目用到了video标签展示视频，原本以为作为html5标准一员的video到了今天兼容性应该没什么问题了，可一用才知道还是有些坑的……那么在这里就由浅入深的论述一下使用video的心得吧（一些众所周知的常用属性和我没怎么用过的在此均省略不表）。属性src 要播放的视频的 URL。只支持3种格式：MP4、WebM、Ogg。另外src除了可以使用放...
2018-08-26 12:23:24
2630
原创 H5页面在移动端的兼容问题
本文首发我的简书论移动端的问题，其实我碰到的很多都在ios端，本来一个页面在安卓手机上跑得好好的，测试小哥突然抛个bug——ipnone7测试样式需要优化之类的，每次拿到这些问题，都更加坚定了我不想用苹果手机的决心…，下面我就将这些曾经困扰我的问题一一道来。 1. &lt;input type=number&gt;在ios上可以改变键盘类型从而输入非数字(本来期望只能填入数字) ...
2018-07-26 08:36:45
3059
原创 奇技淫巧——在textarea中插入文本
本文首发我的简书今天在看自己的记录时发现在几个月前的一个项目中碰到一个这样的需求：做一些简单的计算按钮，点击这些按钮之后就在后面的输入框中显示对应的计算方法，对于一些函数类的计算方法需要将光标定位在括号里面，效果如下图： 当时也是第一次碰到这种需求，我搜集了网络上的一些资料最终解决这个问题，现将这个小技巧整理一下以备日后查阅。 本文的关键点：在光标后插入文本的方法（来源http...
2018-07-26 08:32:17
7503
原创 iframe页面相互调用方法
最近的项目中嵌入了外部的iframe，想跨域调用自己页面的方法，点击iframe中的返回按钮，返回到父级的上一级页面，因为是自己的项目是单页应用，所以无法直接使用window.location.href，这个需求让我头疼了两天（包括衍生出来的问题），解决了这个问题之后我决定总结一下，首先从简单的开始：基本概念： window.self: 当前窗口自身的引用 window.parent: 上...
2018-07-25 13:35:08
14342
原创 固定表头和第一列、内容可滚动的table表格
本文首发https://www.jianshu.com/p/61c52ffced0c 鉴于之前有几个项目都用到了第一行第一列固定不动的表格，所以整理了一下制作这种表格的方法。 基本原理是把表格分为四个部分，左上角是固定不动的，第一行和第一列是半固定的，只能左右移动或者上下移动，而右下角部分则是可以左右上下滑动，第一行和第一列根据右下角部分的移动来动态设置scrollLeft和s...
2018-07-25 08:51:57
20179
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人