小猫儿-优快云博客

原创 antd table 筛选排序远程加载触发pagination onChange事件

背景在使用antd的Table组件的时候，本来只有正常的翻页需求，然后加了一个表头的筛选功能。如图本例也展示了筛选排序功能如何交给服务端实现，列不需要指定具体的onFilter和sorter函数，而是在把筛选和排序的参数发到服务端来处理。遇到问题如下：按照官网demo添加事件，但是发现写完之后，请求了两次接口，一次带筛选一次不带筛选没有思路，看到某博主的帖子，发现这是antd一个bug设计#Table 组件排序功能会自动触发 pagination 的 onChange 事件#...

2021-09-01 17:40:28 5234

原创 vue 全年日历显示并且日期批量选择

这是个基于VUE制作的日历组件，vue版本为2.0 ，UI部分支持viewUI、原生表单控件。由于我司项目需求，需要一个按年的日期选择控件，功能有工作日、非工作日、全选、非全选，行选中/取消、列选中/取消日期选择。调研之后，发现没有符合要求的日历组件。只能自己尝试实现, 仅做参考使用，不喜勿喷~。谢谢！附git地址：https://gitee.com/gitbai/vue-calendar.git主要功能如图：1. 年份选择2.工作日选择3.非工作日选择4..

2021-01-25 15:31:50 4684 7

原创 vue 打包生产环境报错 UnhandledPromiseRejectionWarning: CssSyntaxError:

采坑血泪史。。。打包忽然抛错，如图，怀疑依赖没下载完整，然后卸载安装一下午，然并卵，后在博主贴子找到思路，报错信息如下，css压缩时出现错误：！！！！关注这里，红色框里的关键信息UnhandledPromiseRejectionWarning: CssSyntaxError:解决方案：打开配置文件 build-->webpack.prod.conf.js，文件内查找OptimizeCSSPlugin ，找到后先注释，如下图先尝试注释，然后打包，发现可以打包成功。备注：出错原...

2021-01-15 17:29:16 1337 1

原创 Vue中对Table表格中的输入项进行校验

项目开发中，经常会遇到在场景：对table表格的输入项字段进行校验，同时提交时整体校验，效果如图所示：Table:！！这个校验的实现，主要思路是：1.From表单中嵌套使用table表格，用表单的校验机制实现校验；2.ivu-form-item元素，绑定动态prop;html代码如下，本次项目里样式用了 View UI ，element其他，也同样适用这个校验方法：<template> <div class="wrapper"> <...

2020-12-22 11:17:34 11060 2

原创 vue moment 获取当前5分钟、今日、本周、本月开始结束时间

最近我司产品要做数据大屏，时间选择时有这样的需求，如：5分钟 | 今日 | 本周 |本月（如图），分享下用moment.js获取选择时间段的开始、结束时间1. 当天getCurrentDay(){let date = []let start = moment().format('YYYY-MM-DD 00:00:00')let end = moment().format('YYYY-MM-DD HH:mm:ss')date.push(start)date.push(end)

2020-07-09 15:20:01 5545 2

原创 npm 依赖下载报错 Hostname/IP does not match certificate‘s 相关解决方案

npm 依赖下载报错：ostname/IP does not match certificate's altnames: Host: registry.cnpmjs.org. is not in the cert's altnames: DNS:r.cnpmjs.org解决方案第一步：尝试使用 npm set strict-ssl false 本人亲测有效，如果报相同的错误可以尝试使用 npm config set registry http://registry.n...

2020-06-22 14:33:03 21607 9

原创 vue中 d3/svg流程图根据窗口缩放，设置动态宽度高度或者样式

在开发过程中，很多时候都会用到动态的计算的样式，比如宽度，高度。特别是开发后台管理系统。那么首先你务必看Vue的官方文档。涉及到的基础知识有：绑定内联样式的使用 computed的使用文档写的都是基础使用。那么在项目实战中如何使用，2步就能实现，下面提供一个参考方案：需求场景：获取当前元素宽度，设置containerdiv的可滚动区域范围。1.添加样式绑定 div标签...

2020-01-13 17:00:08 4850 1

原创 vue中实现xml的格式化和高亮显示

一 . xml格式化用到了vkbeautify模块 github地址：https://github.com/vkiryukhin/vkBeautify 1. 首先先下载vkbeautify文件npm install vkbeautify 2. 组件里，引入vkbeautify模块import vkbeautify from ‘vkbeautify’...

2019-12-24 10:26:02 9823 11

原创 vue 文件流导出下载

业务场景：点击下载按钮，请求接口后，js下载接口返回的文件流，并且兼容ie、firefox、chrome关于文件名：我司后端将文件名放在请求头headers里，需要代码获取请求响应消息Response 控制台打印结果：文件流下载完成实现代码： /** * 文件流下载 * data:接口返回文件流 * fileName:文件名 ...

2019-11-22 15:19:44 887 1

原创 vscode vue es6语法配置检测

话说，为了配置vscode，es6语法自动检测，百度的各种攻略，踩坑不少，最重要还没用。。。。。。将最后解决的方法分享大家，共同进步！配置方法：1. 插件下载 ESLint，JavaScript(ES6) code snippets打开vscode —点击右侧扩展商店—搜索框输入es,找到以下2个插件，ESLint，JavaScript(ES6) code snippets 分别点击安...

2018-11-16 17:03:34 22476 6

转载 js、css 实现table表头固定

1. js实现（个人项目用过，完全js实现）html:<div class='table-cont' id='table-cont'> <table class="table table-striped"> <thead> <tr> <th&gt...

2018-01-05 16:55:07 10002 3

原创 idea里gulp-sass下载失败解决方案

idea项目配置gulp环境，执行安装gup-sass的命令，$ npm install gulp-sass --save-dev报错后，参考了前辈博客：http://blog.youkuaiyun.com/jimmyhandy/article/details/50723174，顺利解决。1.报错：gyp verb check python checking for Python exec...

2017-09-08 14:02:20 1240 2

原创 vue cli怎么添加浏览器标签页图标

在build文件夹1. 找到webpack.dev.conf.js，再找到HtmlWebpackPlugin，添加favicon:‘favicon.ico路径’new HtmlWebpackPlugin({　　filename: 'index.html',　　template: 'index.html',　　favicon:'./nationalEmblem.png', //这里设置图标路径　　inject: true})2. 然后找到webpack.prod.conf.js

2023-06-06 10:48:56 486

原创 babel 埋点插件

我们通常对 babel 的理解就是它可以帮助我们去处理兼容性，也就是有些 JavaScript 的新特性，可能我们想去使用，但对于某些浏览器来说还并未支持，此时我们就可以通过 babel 将我们的代码降级处理为浏览器兼容的执行版本，以便能够运行在当前和旧版本的浏览器或其他环境中。Babel 插件就是作用于抽象语法树。Babel 三个主要的处理步骤就是解析（parse），转换（transform），生成（generate）。parse：通过 parser 把源码转成抽象语法树（AST） tran

2022-05-12 15:00:05 1063

原创 Babel初探

babel 的介绍浏览器的发展永远跟不上语言的发展，es6+虽然很普及了，但也不是所有浏览器都可以支持es6+语法。babel的诞生就源于此。官方文档定义：Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。babel 可以帮我们处理以下事情：语法转换，将ES6+ 语法转换成ES5的代码对新版本ES的feature提供polyfill TS / flow

2022-05-12 14:58:38 658

转载 Geojson 常用工具收藏备用

收集了网上几个比较好用的网站，收藏备用1、Geojson数据下载器：地图选择器2、地图拆分工具：http://www.dnccn.com/mapchaifen.html3、Geojson编辑工具：geojson.io4、JSON在线编辑器 bejson：JSON在线编辑器-BeJSON.com4、Geojson最新数据下载：https://hxkj.vip/demo/echartsMap/5、Geojson数据在线转换：https://w.

2021-11-02 11:52:21 3920

转载 Yarn npm命令对比

目录Yarn的优点？Yarn和npm命令对比npm的未来：npm5.0总结基于React的新项目。按照以往，npm 步骤都是：git clone xxxnpm installnpm run devgit clone xxxyarnyarn startYarn是什么？“Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，正如官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷..

2021-05-20 18:03:22 441

转载前端性能优化 -- 从 10 多秒到 1.05 秒

关于性能优化是个大的面，这篇文章主要涉及到前端的几个点，如前端性能优化的流程、常见技术手段、工具等。提及前端性能优化，大家应该都会想到雅虎军规，本文会结合雅虎军规融入自己的了解知识，进行的总结和梳理 ????详情，可以查阅我的博客lishaoy.net首先，我们先来看看 ????雅虎军规的35条。尽量减少 HTTP 请求个数——须权衡使用CDN（内容分发网络）为文件头指定 Expires 或 Cache-Control ，使内容具有缓存性。避免空的 s...

2021-05-18 12:56:43 357

原创解决pre-commit hook failed (add --no-verify to bypass)的问题

解决pre-commit hook failed (add --no-verify to bypass) 问题报错图问题原因：　　pre-commit钩子惹的祸　　当你在终端输入git commit -m"XXX",提交代码的时候，　　pre-commit(客户端)钩子，它会在Git键入提交信息前运行做代码风格检查。　　如果代码不符合相应规则，则报错。解决方式：一、简单粗暴的方式进入项目的.git文件夹下面hooks文件夹，手动删除pre-commit文件运..

2021-02-18 14:59:17 5015

原创 js 查找字符串中指定字符模糊查询不区分大小写

js 查找特定字符模糊查询不区分大小写 var str = "hello world ! hello coder!" ; //查找‘HELLO’是否存在,找不到返回null var reg = new RegExp('HELLO','i') ; var isHas = str.match(reg); console.log(isHas); //打印结果： ["hello", index: 0, input: "hello world ! hello coder!..

2020-12-23 13:13:48 13389

原创 go.js 节点添加右键菜单

公司项目开发时，采用了go.js绘制节点关系图，需添加右键功能，采坑经历分享。go.js API文档不太好懂，开发功能时，建议从实例入手，然后再去看API文档查找相关属性用法就很容易理解了。如图：1.添加右键功能，如下图：右键属性contextMenu，贴代码： //定义一个简单节点，右键属性contextMenu在节点内添加 myDiagram.nodeTemplate = $(go.Node, "Auto", { contextMenu: myContextM

2020-12-17 11:08:32 2079 1

原创 IntelliJ IDEA For Mac 快捷键

根据官方pdf翻译：https://www.jetbrains.com/idea/docs/IntelliJIDEA_ReferenceCard_Mac.pdf在 IntelliJ IDEA 中有两个 Mac 版本的快捷键，一个叫做：Mac OS X，一个叫做：Mac OS X 10.5+目前都是用：Mac OS X 10.5+有两套的原因：https://intellij-support.jetbrains.com/hc/en-us/community/posts/206159109-U.

2020-12-02 16:42:59 858

原创 VSCode 常用快捷键 Mac

一.删除整行：command+shift+k二.删除所有空行：1.输入Command + Option + F打开替换栏2.输入正则匹配：^\s*(?=\r?$)\n3.选择全部替换为空基本Command + X 剪切（未选中文本的情况下，剪切光标所在行）Command + C 复制（未选中文本的情况下，复制光标所在行）Option + Up 向上移动行Option + Down 向下移动行Option + Shift + Up 向上复制行Option + Shift + Down

2020-12-02 16:41:15 514

转载 GoJS 初探

GoJS 是什么GoJS是一个功能丰富的js库，用于在浏览器上实现自定义交互式图表和复杂的可视化图表。 GoJS通过可自定义的模板和布局构建复杂节点，链接和组，绘制js图表。GoJS为用户交互提供了许多高级功能，如拖放，复制和粘贴，文本编辑，工具提示，上下文菜单，自动布局，数据绑定和模型，事务状态和撤销管理，事件处理程序，命令以及用于自定义操作的可扩展工具系统等等。为什么使用GoJS为了更直观地表达信息，我们常常需要用图形来展示数据以及逻辑关系，例如最常见的架构图、ER图、流程图、BP.

2020-11-04 14:38:06 2836 2

原创 gojs 去除水印

参考链接：https://www.cnblogs.com/EdisonVan/p/9460101.html下面记录一下gojs去除水印的方法：在go.js中搜索关键字7eba17a4ca3b1a8346，将值替换成 function(){return true;}，如：a.Jv=function(){return true;}，可能前面并不一定是a.Jv=，但是不影响，把后面的值替换掉就可以了...

2020-10-26 11:16:04 1358

原创 [JavaScript] JS中如何跳出循环/结束遍历

[JavaScript] JS中如何跳出循环/结束遍历直接抛结论，下表是JS中常用的实现循环遍历的方法的跳出/结束遍历的办法，经过测试后的总结。可能各位大佬还有其他的办法，我在此表示大佬NB。序号方法 break continue return return true return false 结论 1 for循环成功跳出本次循环不合法不合法不合法 √ 2 Array.forEach().

2020-09-11 10:18:33 2393

转载前端 crypto-js aes 加解密

前端 crypto-js aes 加解密背景前段时间公司做项目，该项目涉及到的敏感数据比较多，经过的一波讨论之后，决定前后端进行接口加密处理，采用的是 AES + BASE64 算法加密~网上关于 AES 对称加密的算法介绍挺多的，对这一块还不是特别理解的小伙伴可自行百度，这里我推荐一篇AES加密算法的详细介绍与实现，讲的还是蛮详细的~具体实现其实搞懂了是怎么一回事，做起来还是挺简单的，因为库都是现成的，我们只需要会用就好啦，这里我在推荐一篇理解AES加密解密的使用方法，加深大家对 AE

2020-08-18 15:50:33 666

原创 js动态生成唯一id

1.随机数长度控制,定义一个长度变量（length），生成可控长度的随机数：Math.random().toString(36).substr(3,length)2.引入时间戳：Date.now().toString(36)3.合在一起最终办法：genID(length){return Number(Math.random().toString().substr(3,length) +...

2020-08-17 16:39:40 36683 1

原创 VSCode 常用快捷键 Mac

VSCode 常用快捷键 Mac一.删除整行：command+shift+k二.删除所有空行：1.输入Command + Option + F打开替换栏2.输入正则匹配：^\s*(?=\r?$)\n3.选择全部替换为空基本Command + X 剪切（未选中文本的情况下，剪切光标所在行）Command + C 复制（未选中文本的情况下，复制光标所在行）Option + Up 向上移动行Option + Down 向下移动行Option + Shift + Up 向上复制行Opt

2020-08-17 15:59:24 1111

原创 vue项目在浏览器地址栏设置图标

在vue项目中，我们怎样设置浏览器图标？1. 我们来看vue项目的目录结构，根目录下有一个index.html，这个就相当于我们普通项目中的各个html页面文件，所以设置方法就是在index.html的head标签中添加link标签。在这里要注意的是图标文件的位置，不能放到src里，这样的路径会让浏览器找不到。网页把根域名作为相对路径的根目录了，然而我们文件的路径是相对于项目文件的根目录的，因此就找不到了。因此，图片一类的静态文件，应该放在这个static文件夹下，这个文件夹下的文件（夹）会

2020-07-13 11:12:51 3706 2

原创 Mac新建文件夹、txt文件、其他格式文件

Mac新建文件夹、txt文件、其他格式文件Mac新建txt，方法记录一下：先cd到你指定的文件路径下：新建文件夹：mkdir test新建txt touch test.txt新建无后缀格式文件touch test如果要删除test文件夹及所有子文件内容rm -rf test删除空文件夹,只要rm就可以了rm test　...

2020-03-23 17:14:50 6977

原创安装Vue-cli提示 -bash: vue: command not found

问题描述：npm install vue-cli -g成功安装之后，执行vue -V提示 command not found1. 使用淘宝镜像：sudo cnpm install vue-cli -g 安装成功后，查看版本 vue -V 提示： -bash: vue: command not found2. 添加环境变量配置如图，安装成功后，复制路径地址（图中位置1...

2019-11-26 14:24:30 4495 3

原创 mac 上运行http-server的问题

window 系统安装http-server 非常好用，如果是mac，系统自带的就有httpserver 服务，没有必要在安装首先sudo apachectl start 然后，ls执行查看下目录，cd到你要的文件夹内执行如下代码：python -m SimpleHTTPServer 然后在地址栏键入如下url 即可打开http://localhost:8000...

2019-09-03 16:32:02 2466

转载【VUE】父组件参数更新，子组件watch监听参数不刷新

参数更新，子组件不刷新不到可能有以下几个方面的原因0、没加watch监听子组件参数变化1、箭头函数2、如果监听的参数为对象，可能因为没有深度监听，选项：deep，为了发现对象内部值的变化，可以在选项参数中指定deep: true。注意监听数组的变动不需要这么做。watch:{ data: { // data为监听参数名 handl...

2019-06-24 14:30:44 4272

原创 vue 修改element-ui/iview 组件默认样式

我们在使用element-ui的时候经常会需要修改组件默认样式。有的时候element提供的默认的样式不能满足项目的需要，就需要我们对标签的样式进行修改，但是发现修改的样式不起作用我目前知道的有两种方法，推荐第二种方法：1.在需要更改的组件里新增一个style标签【重点：不加scoped】，然后直接获取class设置样式注意：为避免污染全局样式，最好不把它放在公共的css里面，给父级...

2019-05-09 13:57:47 3651 1

原创 js 正则去除html代码里 img标签里的style,添加图片自适应值width

js正则去除一段html里 img标签里的style，添加图片自适应 max-width:100%convert () {let htmlText = '<img style="border: 0px; width: 537px; display: block;">'let str = htmlText.replace(/<img[^>]*>/gi,...

2019-02-25 13:46:23 8125 2

转载这10个免费配图网站收好咯！（可商用）

如果你看到这里，那么恭喜你，今天你将喜提910个无任何风险的免费素材网站，从此走向小编生涯的巅峰！ 01 Pixabayhttps://pixabay.com/业界有名的免费图片素材网，图片资源160万+张，有照片、插画、矢量图、视频等多类型素材免费下载，支持中文、英文搜索。 02 VisualHunthttps://visualhunt...

2019-02-20 16:05:52 9851

原创 moment组件踩坑日期类型与字符串类型

一.从今天往前30天00:00:00，时间格式为日期类型const date = moment().subtract(29, 'days').hours(0).minutes(0).seconds(0).toDate() //2018-12-24T16:00:00.773Z日期类型从今天往前30天00:00:00，时间格式为字符串类型const date=moment().s...

2019-01-23 17:08:01 3115

原创 Vue实现table列表项上下移动

el-tabel 列表项实现上移，下移，删除功能结合Element组件，scope中有三个参数（row，cow，$index）分别表示行内容、列内容、以及此行索引值，table上绑定数组 :data=“newsList”。上移和下调两个按钮，并绑定上点击函数，将此行的索引值(scope.$index)作为参数：<template> <el-table ...

2019-01-22 17:36:56 12295 7

转载移动端页面自适应解决方案—rem布局

参考：https://www.cnblogs.com/Vayne-N/p/6903590.htmlrem布局非常简单，首页你只需在页面引入这段原生js代码就可以了----其实这种自适应方案是一种“等比例缩放”,在手机上会随屏幕大小而变化,但是在ipad上面图标、间距会过大,,, 这里推荐rem布局(进阶版)(function (doc, win) { var docEl ...

2018-12-29 10:24:22 318

store_adress.xls

空空如也