经常玩 GitHub 的童鞋想必对 Issues 都不陌生。它是连接维护者和使用者的一个重要方式。对于维护者：可以收集、处理产品的 Bug 和 新特性。建立以产品为中心的社区。根据 issue 可定位产品薄弱环节和未来走向。对于使用者：可以通过 issue 咨询使用问题，也可查询以往 issue 来解决自己遇到的问题。与不同的使用者交流经...

1 介绍 pug 是一种前端模板引擎，原名 jade 可用来生成 HTML，它的写法类似于 CSS 中文文档 这里先简单举几个 🌰 {代码...} {代码...} {代码...} 易理解，同时极大的简约了我们的代码。 2 安装 2.1 下载 {代码...} 2.2 配置 {代码...} 2.3 使用 {代码...} 3 实践 3.1 举例 下面将拿出实际项目中的一些代码进行改造 原代码...

1 前 言 tabindex 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航。 本篇将介绍 tabindex 的一些用法。通常使用 tab 键移动焦点，使用空格键激活焦点。 2 规范 && 兼容 HTML 4 Only supported on <a>、<area>、 <button>、 <object>、 <select>、 <textarea> ...

1 前 言 平时我们在开发的时候经常使用 npm 安装各种组件。 今天我们就来尝试下制作一个自己的组件发布到 npm 上。 这里我以自己刚发布的一个 Vue 组件来介绍。感兴趣的可以来下载玩玩。 k-progress 安 装 npm install -S k-progress 使 用 {代码...} 2 开 发 2.1 新建项目 新建一个 Vue ，熟悉的可以直接略过哈。 这里...

1 前 言 1.1 预览图 2 实 现 本例使用： Vue element-ui 2.1 画 图 {代码...} {代码...} {代码...} 注意： canvas 须设置 width height 若你的项目中，有多个 canvas 画图，注意 id 定义要不同 生命钩子不能使用 created() img.crossOrigin img.src ?time= 是为了解决 图片跨域的问题 为不影响图片渲染，保存像素信息的...

1 前 言 1.1 预览图 1.2 介 绍 {代码...} 1.3 使用技术 Vue Element-ui 2 实 现 2.1 查看UI 这里是直接使用 UI 里的表格组件，F12 查看 可以明显看出： 表格头 class="el-table__header-wrapper" 表格体 class="el-table__body-wrapper" 表格高度默认 48px 2.2 滚 动 我们想要的效果是向下滚动，即向下移动 48px {代码.....

CreateJS是基于HTML5开发的一套模块化的库和工具。基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.

系统搭建vue-cli vuex记录登录信息 vue-router路由跳转 3个维度的页面，提取出共用的组件 各个组件开发 调节样式，增加UI 加入后台接口数据 优化显示 测试 上线

1 前 言 1.1 场 景 我们在页面展示时，为了更好的效果，一般使用了自定义的字体 @fant-face 。 之前在开发的时候使用了一些自定义字体，这里总结下自己寻找的的一些处理办法。 本文只列出了引入本地字体，网络的字体由于实践不多，这里介绍就少一些。 😂 献丑了 😂 2 正 文 2.1 本地字体 2.1.1 版 权 首先一定要注意这个问...

1 前言 1.1 业务场景 一般使用 Vue 项目连接后端请求，使用的 axios {代码...} axios 中的 baseURL 一般是访问地址 Vue 项目打包后，如果我们需要修改这个 baseURL 就需要修改代码重新 build 这样就比较麻烦了 有没有什么办法可以在Vue项目打包后再自定义变量呢？ 2 实现原理 2.1 文件 目前使用新版 @vue/cli 创建的项目...

本文章篇幅略长，内容有点多大佬可根据目录选择性查阅新人可一步步来阅读 1 前言 1.1 业务场景 突然接到产品说要做一个数据监控的系统。有线图、柱状图、地图，类似于数据可视化的方式。 本人之前从未接触过Echarts，然后需要2周拿出成果，有点慌😂😂 1.2 业务分析 拿到需求看了一下 支持用户名、密码登录，默认显示一个维...

1 前言 1.1 业务场景 图片储存在后台中，根据图片的地址，在vue页面中，查看图片，并根据坐标标注指定区域。 由于浏览器的机制，使用window.location.href下载图片时，并不会保存到本地，会在浏览器打开。 2 实现原理 2.1 绘制画布 {代码...} 这里为了交互体验，使用了element-ui的弹窗方式。将canvas画布放到了弹窗中。...

1 前言 1.1 业务场景 vue页面监听键盘鼠标等事件。 官方给的例子是在input标签中的，我们想要的效果是不使用固定标签。 2 实现原理 2.1 增加监听 {代码...} 这里定义了，键盘按出的时候的事件 和 鼠标滑轮滚动的事件。 这里可以自行查询下有哪些事件， 关键字： HTML DOM Event 可参考：W3school 菜鸟教程 这里根据addEv...

1 前言1.1 业务场景由前台导入Excel表格，获取批量数据。根据一个数组导出Excel表格。1.2 Demo 地址[链接]2 实现原理2.1 引入工具库file-saver、xlsx、script-loadernpm install -S file-saver xlsxnpm install -D script-loader2.2 导入Excel2.2.1 Element 上传控件 {代码...} limitUpload = 1限制只能上传1个文件accep...

1 前言 1.1 业务场景 附件zip上传到服务器后，在页面中可直接查看zip中的文件内容，如：readme.txt。 2 实现原理 2.1 引入工具库 jszip、jszip-utils npm i jszip -S npm i jszip-utils -S 2.2 查看txt中内容 {代码...} 在vue中引入，其中在JSZipUtils使用中this的指向进行了重定向。 row.downloadPath是附件的下载地址...

若需要和当前时间比较，这里提供当前时间的获取格式化方法。我这里是根据传入类型输出日期或者日期+时间，可以明显看出type为day时，输出日期。