- 博客(30)
- 收藏
- 关注
RSS订阅
原创 vue + view-design 菜单高亮及展开情况
目录vue + view-design 菜单高亮及展开情况页面刷新菜单高亮及默认打开跳转子页面，父菜单高亮，离开二次确认，取消时，菜单正确高亮跳转子页面，父菜单高亮离开二次确认，取消时，菜单正确高亮vue + view-design 菜单高亮及展开情况页面刷新菜单高亮及默认打开需求背景：页面菜单分为多层折叠菜单和单层菜单，当页面浏览器刷新时，仍然能正确保留当前菜单高亮以及打开的层叠菜单项实现思路：Menu 组件绑定 active-name 属性和 open-names 属
2020-12-11 11:57:31
1034
原创 view-design 组件库表格筛选条件联动保留前面筛选条件的高亮状态
view-design 组件库表格筛选条件联动保留前面筛选条件的高亮状态问题：当第一个筛选条件选中，第二个筛选条件会联动变化，此时会导致整个 table 组件刷新，那么第一个筛选条件的高亮状态会被清除解决思路通过编辑组件库的 Table 组件相关的源码实现页面刷新之后，仍然能保留第一个筛选条件的高亮状态实现思路组件库的 table-head 组件里的 headRows 计算方法，会返回最新的表格列的配置数据。当选中第一个筛选项时，会触发第二个筛选项数据的更新，此步操作的最后结果是
2020-11-23 18:00:10
842
原创 Electron 接收 UDP 数据报
Electron 接收 UDP 数据报需求Electron 可以自动接收服务器发送的广播 UDP 数据报，当数据报的内容中有 'xxx'字符串时，读取该条数据报的数据内容并传递给渲染进程实现Electron 包含主进程和渲染进程 渲染进程中的页面点击读取广播 UDP 数据报按钮（入口） 监听入口按钮，当入口按钮被点击时向主进程发送 listener 事件，获取 U...
2019-12-02 15:51:38
4026
1
原创 iview 折叠面板 Collapse 和 多选框 Checkbox 搭配 for 循环使用
需求场景：折叠面板中有数据项，数据项有多选和全选以及取消全选的功能，折叠面板通过数组 for 循环生成并渲染，Checkbox 与 CheckboxGroup 也是通过数组中的数据 for 循环以及绑定遇到的问题：代码按照逻辑写完之后，CheckboxGroup 不能按照正常情况工作，全选和取消全选错乱解决办法：全选时不要将 checkAllGroup 直接带入运算，创建一个过渡变量，代入...
2019-11-11 10:04:07
3400
2
原创 vue 项目打包通过命令修改 vue-router 模式，修改 API 接口前缀
需求说明：在开发 vue 项目的过程中遇到的需求是要把 api 接口前缀暴露在命令行，通过 npm run build apiUrl 即可修改接口入口，用于从 docker 部署到不同的测试服务器上，其次是路由模式的问题，部署到测试服务器上的需要是 history 模式，但是产品是用 electron + vue 开发的桌面应用，electron 硬性要求 vue-router 的路由模式是 ha...
2018-06-13 11:42:06
3287
原创 正则匹配多个键值对英文逗号连接
正则匹配多个键值对英文逗号连接key=value,key=value,key=value,key=value...
2022-11-04 10:22:47
565
1
原创 前端项目 git 流程化
一、在码云注册 ssh 公钥 安装 git 打开 git bash 输入 ssh-keygen -t rsa -C "码云邮箱地址" ，三次回车之后生成密钥对 输入 cat ~/.ssh/id_rsa.pub，回车，生成的公钥会显示在控制台，复制控制台上的公钥内容 打开码云 --> 设置 --> SSH 公钥，将公钥内容粘贴至公钥下方的文...
2019-12-10 15:43:27
529
原创 npm 发布包以及安装测试流程
npm 发布包以及安装测试流程什么是 NPM？NPM 是随同 Nodejs 一起安装的 javascript 包管理工具，能解决 NodeJs 代码部署上的很多问题，常见的使用场景有以下几种： 允许用户从 NPM 服务器下载别人编写的第三方包到本地使用。例如 iview、vue-router、gojs 等 允许用户从 NPM 服务器下载并安装别人编写的命令行程序到本地使用。...
2019-12-02 15:46:36
1380
原创 webpack + vue-cli（v2.xx） 搭建前端脚手架性能优化
webpack + vue-cli（v2.xx） 搭建前端脚手架性能优化路由懒加载路由懒加载语法如下component: resolve => require(['@/views/xxx/xxx'], resolve)例如{ path: '/index', name: 'index', component: resolve => requ...
2019-10-14 11:23:50
491
原创 字符串方法 substr() slice() substring()
字符串方法 substr() slice() substring()substr(num1, num2)num1 表示从 num1 位置开始截取num2 表示截取 num2 长度的字符串，缺省时默认将字符串的末尾作为截取结束位置slice(num1, num2)num1 表示从 num1 开始截取num2 表示截取到 num2 为止（不包括 num2 ），缺省时默认将字符串...
2019-08-27 17:30:43
219
转载 JavaScript中WebSocket介绍与运用
1、Web Sockets简介要说最令人津津乐道的新浏览器API,就得数Web Sockets了.Web Sockets的目标是在一个单独的持久连接上提供全双工以及双向通信.在JavaScript中创建了Web Sockets之后,会有一个HTTP请求发送到服务器以发起连接.在取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为Web Sockets协议.也就是说,使用标准的HT...
2019-08-27 10:47:25
7505
原创 vuepress 引入 iconfont.js 打包时报错 window is not defined
vuepress 引入 iconfont.js 打包时报错 window is not defined情景复现在 enhanceApp.js 中直接引入 iconfont.js ，npm run docs:build 的时候会报 window is not defined 错误，查看 iconfont.js 看到在函数模块化后面传入了全局变量 window出现问题的原因当开发 V...
2019-08-20 14:30:19
3525
原创 js 打印分页
js 打印分页将要分页的元素的外层 div 设置属性 page-break-before: always; （这个属性正在被更通用的 break-before取代）注意：该 div 的 display 属性值是 block ，position 属性值是 relative 才起作用在项目中将 div 属性值设置为 inline-block 了，page-break-before: ...
2019-07-18 14:19:17
1099
原创 js 调用浏览器打印时无法通过 css 设置背景
js 调用浏览器打印时无法通过 css 设置背景项目中使用 after 和 before 以及 border-bottom 模拟了一个有三行下划线的输入文本框，当调用 window.print 之后，after 和 before 的背景无法渲染，导致只有最下面一行下划线解决方式：在 after 和 before 的父元素的样式中添加-webkit-print-color-adjust...
2019-07-02 17:07:32
1225
原创 垃圾回收算法
垃圾回收算法分配内存JavaScript 在定义变量时就完成了内存分配// 给数值变量分配内存var num = 123// 给字符串分配内存var str = 'a string'// 给对象及其包含的值分配内存var obj = { a: 1, b: null}// 给数组及其包含的值分配内存var arr = [1, null, 's...
2019-07-01 12:03:26
136
原创 CSS 世界里的 margin 合并
CSS 世界里的 margin 合并margin 合并块级元素的上外边距和下外边距有时会合并为单个外边距，这种现象称为 'margin 合并'。从此定义上，我们可以捕获亮点重要的信息块级元素，但不包括浮动和绝对定位元素，尽管浮动和绝对定位可以让元素块状化 只发生在垂直方向，需要注意的是，这种说法是在不考虑 writing-mode 的情况下，当设置了 writing-mode 为 v...
2019-06-28 17:43:31
294
原创 display:none; 和 visibility:hidden 的区别
display:none; 和 visibility:hidden 的区别看了张鑫旭老师的 《CSS世界》一书，对 display:none 和 visibility:hidden 的区别整理如下：display:none隐藏 display: none 是真正意义上的隐藏，当一个元素设置了此属性，则其后代子元素都隐藏 占位display: none 设置的元素是不占位的 tra...
2019-06-28 13:56:40
201
原创 window.URL.createObjectURL(mediaStream) 出现 typeError 错误
window.URL.createObjectURL(mediaStream) 出现 typeError 错误的原因是浏览器正在取消对 mediaStream 类型的支持解决方案：video.srcObject = mediaStream
2019-01-04 16:07:41
4658
1
原创 前端预览后端服务器响应的 pdf 数据
需求：后端服务器响应数据为 pdf 数据，前端负责接收并预览在页面上犯错点1：前端接收响应数据类型没设置对，默认设置的 json ，在接收 pdf 数据时应该把 responseType 设置为 arraybuffer 即可接收 pdf 数据为二进制数组接收完之后需要使用 Blob 将二进制数组转换成 Blob 对象const blob = new Blob([res.data], ...
2019-01-02 10:49:25
2196
1
原创 javascript 对象具有哪些属性和方法
Object 的每个实例都具有下列属性和方法：constructor: 保存着用于创建当前对象的函数。对象的该属性对应的构造函数就是 Object()。hasOwnProperty(propertyName): 用于检查给定的属性在当前对象实例中是否存在。其中，作为参数的属性名 (propertyName) 必须以字符串形式指定。isPrototypeOf(object): 用于检查传...
2018-10-26 16:51:56
881
原创 javascript 将一个值转换为字符串
javascript 将一个值转换为字符串有两种方式。第一种是 toString() 方法。数值，布尔值，对象和字符串值都有 toString() 方法，但是 null 和 undefined 没有这个方法。多数情况下调用 toString() 方法不必传递参数。但是，在调用数值的 toString() 方法时，可以传递一个参数：输出数值的基数， toString() 可以输出以二进制...
2018-10-26 16:36:53
985
原创 字符字面量
String 数据类型包含一些特殊的字符字面量，也叫转义序列，用于表示非打印字符，或者具有其他用途的字符。这些字符字面量如下表所示：字符字面量 字面量 含义 \n 换行 \t 制表 \b 退格 \r 回车 \f 进纸 \\ 斜杠 \' 单引号 ( ' ) ，在用单引号表示的字符串嵌套中使用，例如: 'I say: ...
2018-10-26 16:22:22
1611
原创 如何得到 0x 开头的 16 进制的值
1. 使用 Number() 方法，例如 Number("0x11") 的结果 172. 使用 parseInt() 方法，例如 parseInt("0x11") 的结果 17 parseInt() 方法还可以指定进制参数，指定进制参数之后就可以不要前缀，例如 parseInt('11', 16) 的结果 173. 打开 chrome 控制台，直接在 Console 那一栏输入 ...
2018-10-26 15:52:47
4546
原创 使用 electron-vue 搭建桌面应用开发模板
参考 PicGo 搭建符合本公司需求的桌面应用开发模板已实现功能：1.单行命令即可生成可安装程序2.使用 nsis 构建安装向导3.实现文件的读写功能4.窗口的最小化按钮和关闭按钮以及标题栏自定义，不使用 electron 自身携带的原生标题栏5.窗口关闭保存到托盘6.托盘右键菜单有'关于本产品'...菜单7.使用说明可在独立窗口中打开，且是以本地 pdf 形式8.使用 nsis 制作安装向导，实...
2018-06-11 15:49:41
6246
原创 vue 项目打包的过程中通过命令行修改 api 接口前缀
环境：vue 全家桶、nodeJs、chrome浏览器需求：后端需要将 npm run build 之后的文件部署到不同的服务器上去，后端希望在 npm run build 命令的后面直接加上 api = https://192.168.166.156:8444 (举个例子) ，在命令行执行之后整个页面的 api 接口前缀就会改为https://192.168.166.156:8444实现...
2018-06-11 14:47:50
5794
2
原创 vue-router 跳转中断，iview的menu组件高亮不变
vue-router 跳转中断，iview的menu组件高亮不变场景：编辑页有保存与取消编辑按钮，用户编辑后未保存页面就进行跳转行为，弹框提醒用户是否继续跳转，用户点取消则停留在当前页面。技术点：1. 使用 vue-router 的 beforeRouteLeave 钩子在路由即将离开当前页面进行条件判断，满足条件则继续跳转 next()，否则不进行跳转2. vue-router 的 router...
2018-05-09 15:29:25
3664
2
原创 前端js实现桌面通知
前端js实现桌面通知，思路是调用Notification对象，先检测用户是否授权桌面显示，若授权则进行显示，若不授权则不显示。在Notification对象中常用的属性有title(桌面通知标题)、body(桌面通知的主体内容，注意不对html进行转义，只是字符串)、icon(桌面通知左边的logo)、dir(主体内容的水平书写顺序)。Notification有onclick事件、onerror事件、onshow事件、close()事件。
2017-06-13 11:39:24
4060
原创 前端js实现图片上传预览
前端实现图片上传预览，实现的原理是使用input标签，type=file，实现图片的上传，对input进行onchange事件的监听，当input的value值改变时代表用户已经上传了图片，而input的value值就是用户上传的图片的相对路径，new一个FileReader对象，将图片转换成base64格式的编码，并赋值给img 标签即可。
2017-06-05 13:55:17
18381
1
原创 前端js实现粘贴图片到可编辑的div(其他标签也可)中
前端js实现粘贴图片到可编辑的div中去，实现原理是监听div容器的paste事件，对事件中粘贴过来的数据进行分析，若是图片则使用formdata将图片转换成二进制流，使用ajax传给后端，后端将图片存到服务器并返回一个图片在服务器中的地址，在ajax的success事件中动态创建img标签，将返回的地址赋值给img标签，并将标签添加至div标签中即可实现粘贴图片至可编辑的div中去。
2017-06-05 10:43:16
9165
9
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人