chrome复制、导出请求
一个人的行动，比他所说的话，更有详细的表现。——卡耐基 可以通过右键点击我们的请求，进行重放，这样就能发起相同的请求 也可以复制出来，例如以fetch格式复制 复制出来后，粘贴是这个样子： 1234567891011121314151617181920fetch("https://api.bilibili.com/x/space/acc/info?mid=34830549&jsonp=jsonp", { "headers": { "accept": "application/json, text/plain, */*", "accept-language": "zh-CN,zh;q=0.9", "cache-control": "no-cache", "pragma": "no-cache", "sec-c...
fokus
死亡，就是你加上这个世界，再减去你。——卡尔维诺 分享一个好玩的开源项目，演示地址： https://lab.hakim.se/fokus/ 代码仓库：https://github.com/hakimel/Fokus 演示效果： 当我们在页面上框选时，会在页面上加个蒙版，高亮框选区域 使用方式，首先下载fokus.min.js 官方链接 备用链接 然后引用 1<script src="/js/fokus.min.js"></script> 最后编写代码(随便写点) 1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont...
opencc4j
“不用给我爱，不用给我钱，不用给我声誉，给我真理吧。我们应该有勇气去面对真实的内心，即使前面荆棘满地，也要坚定地走下去。为了不浪费你的这一辈子。”——梭罗《瓦尔登湖》 分享一个java简繁转换的库opencc4j https://github.com/houbb/opencc4j Group ArtifactId Version 12345<dependency> <groupId>com.github.houbb</groupId> <artifactId>opencc4j</artifactId> <version>1.7.2</version></dependency> 使用起来： 繁简体转换转为简体123String original = "生命不息，奮鬥不止";String result = ZhConverterUtil.toSimple(original);Assert.assertEquals("生命不息，奋斗不止...
overflow和动态计算高度
人们总会找到某种带头人,把他供奉起来,培养成伟人……暴君就是这么来的;暴君最初都是以保护者的形象出现的。——柏拉图,《理想国》 首先是MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow 其中对overflow进行了描述： CSS 属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。 重点在这里： 为使 overflow 有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。 那问题来了，我这里有一个折叠面板 我希望这里多个折叠面板每一项的头部都能显示在页面中，并且其子项能够适应屏幕高度和折叠情况变化 为了实现上面的效果，我们需要在每一个折叠面板子项中设置overflow-y:auto，然后给其设置height或者max-height 我们知道css中有个计算函数calc可以计算我们的高度，这里的卡片为了保证屏幕自适应，可...
htmlToCanvas
利用时间是一个极其高级的规律。——恩格斯 今天分享一个html转canvas的插件： http://html2canvas.hertzen.com/ 使用方式特别简单： 引入： 12pnpm install --save html2canvas# import html2canvas from 'html2canvas'; 或者直接上link 1<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> 需要转换的html节点 123<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4></div> 使用： 123html2canvas(docu...
ts装饰器(注解)
书，能保持我们的童心；书能保持我们的青春。——严文井 官方文档：https://www.typescriptlang.org/docs/handbook/decorators.html 这个东西在java里叫注解，不过在ts中，一个装饰器对应一个方法 首先执行命令： 1tsc --target ES5 --experimentalDecorators 然后配置一下tsconfig.json就可以使用了 123456{ "compilerOptions": { "target": "ES5", "experimentalDecorators": true }} 首先我们定义一个class 1234class User { private id: Number | undefined; private name: string | undefined;} 我们编写一个装饰器对应的逻辑，实现ja...
虚拟列表
我来到这个世界，为了看看太阳和蓝色的地平线。——《城门开》 分享一个vue虚拟列表的组件： https://github.com/tangbc/vue-virtual-scroll-list 官方文档： https://tangbc.github.io/vue-virtual-scroll-list 沙盒： https://codesandbox.io/s/live-demo-virtual-list-e1ww1 使用方式： 1pnpm install vue-virtual-scroll-list --save 示例： 12345678910111213141516171819202122232425<template> <div> <virtual-list style="height: 360px; overflow-y: auto;" // make list scrollable :data-key="'uid'" :data-sources=&q...
ts中枚举
现实生活喜欢对称和轻微的时间错移。——博尔赫斯《南方》 填坑，官方文档：https://www.typescriptlang.org/docs/handbook/enums.html 我新建了一个vue项目用来演示 这里代码如下： 12345678910enum Direction { Up, Down, Left, Right}console.log({ Direction });console.log({ 'Object.entries(Direction)': Object.entries(Direction) });console.log({ 'Direction[0]': Direction[0] });console.log({ 'Direction.Up': Direction.Up }); 打印结果如下： 定义一个双向绑定的值 1const count = ref(Direction.Up)...
js拖拽框选插件
只要你具备了精神气质的美，只要你有这样的自信，你就会拥有风度的自然之美。——金马 分享一个js的拖拽框选插件 官网：https://dragselect.com/ 源码：https://github.com/ThibaultJanBeyer/DragSelect.git 使用： 1pnpm i dragselect 有前端大佬翻译了部分，并编写了一个html的demo https://gitee.com/ovsexia/DragSelect-Doc-Cn 我在使用过程中发现反选有点问题，所以如果是跟我一样pnpm i下载下的版本，应该也会有这个问题，因此反选自己实现即可，这是我按照上面链接中的demo在vue模块化项目中的组件： TagDragSelect.vue 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828...
在vue中使用jsx
一个人追求的目标越高，他的才能就发展得越快，对社会就越有益，我确信这也是一个真理。——玛克西姆·高尔基 首先是官方文档 vue2的：https://cn.vuejs.org/v2/guide/render-function.html#JSX vue3的：https://v3.cn.vuejs.org/guide/render-function.html#jsx 我们这里以vue2举例： 先使用render函数写一个最简单的jsx组件 12345678910<script>export default { render() { return <div>Hello World</div> }}</script><style></style> 注意此处不能有template标签，其他的该咋用就咋用 还有的区别在这个链接里：https://github.com/vuejs/jsx#installation 如果有react的基础，上手这个就很容易...