阿超

“不用给我爱，不用给我钱，不用给我声誉，给我真理吧。我们应该有勇气去面对真实的内心，即使前面荆棘满地，也要坚定地走下去。为了不浪费你的这一辈子。”——梭罗《瓦尔登湖》 分享一个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("生命不息，奋斗不止...

人们总会找到某种带头人,把他供奉起来,培养成伟人……暴君就是这么来的;暴君最初都是以保护者的形象出现的。——柏拉图,《理想国》 首先是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可以计算我们的高度，这里的卡片为了保证屏幕自适应，可...

利用时间是一个极其高级的规律。——恩格斯 今天分享一个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...

书，能保持我们的童心；书能保持我们的青春。——严文井 官方文档：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...

现实生活喜欢对称和轻微的时间错移。——博尔赫斯《南方》 填坑，官方文档：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的拖拽框选插件 官网：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...

一个人追求的目标越高，他的才能就发展得越快，对社会就越有益，我确信这也是一个真理。——玛克西姆·高尔基 首先是官方文档 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的基础，上手这个就很容易...

不要太在乎一些人，越在乎，越卑微。——周国平 首先按照官方文档的demo写好代码，却报错如下： 安装插件Error Lens后： 如何解决？ 前往Text的ref源码，可以看到是需要一个叫LegacyRef的类型 我们进LegacyRef，看到其就是Ref或string的类型 因此这里我们定义为Ref类型即可 这里出现了新的问题，不能将MutableRefObject<Text | null |undefined>分配给Ref<Text> 我们进入useRef源码，看到其包含几个重载 分别查看MuteableRefObject和RefObject 可以看到RefObject是Ref中容许的其中一种类型 所以应该使用上面一种重载 在原有代码React.useRef()中传入null 报错解决 同理，trRef一样 注意此处Ref<TextRef>内的泛型使用的是konva/lib/shapes/Text包下的Text，改名为TextRef 除了在定义变量左侧申明类型，在方法右侧也可以申明泛型，让编辑器自动推测

“善良一点，因为大家的一生都不容易。”——《奇迹男孩》。 官方文档：https://konvajs.org/docs/react/ 中文文档：http://konvajs-doc.bluehymn.com/docs/react/ 安装： 1pnpm install react-konva konva --save 在konva中能做到的，在konva-react也一样能做到，只不过是换了一种写法罢了 这里有个使用konva-react的在线编辑器Demo https://konvajs.org/docs/sandbox/Canvas_Editor.html 是基于一个叫Polotno的框架，它提供了多种react对konva的封装，能开箱即用 https://polotno.dev/ 但其不可以免费用于商业用途 https://codesandbox.io/embed/github/polotno-project/polotno-site/tree/source/examples/polotno-demo?fontsize=11&hidenavigation=1&a...