- 博客(17)
- 收藏
- 关注
RSS订阅原创 JS 转base64中文乱码问题
1.判断是否是base64const isBase64 = (str) => { if(!str) return false; var base64Str = /^([A-Za-z0-9\s+/]{4})*([A-Za-z0-9\s+/]{4}|[A-Za-z0-9\s+/]{3}=|[A-Za-z0-9\s+/]{2}==)$/; return base64Str.test(str);}2.UTF8转换const utf8to16 = (str) => { var
2022-02-22 10:44:21
1854
原创 JS 使用DES加密解密
1.安装插件npm install crypto-js2.使用import CryptoJS from 'crypto-js';const key = 'abcdefg';const keyHex = CryptoJS.enc.Utf8.parse(key);// 加密const encryptDES = (message) => { if (message) { var encrypt = CryptoJS.DES.encrypt(message, keyHex, {
2022-02-22 10:39:24
4153
原创 react代码编辑器 react-ace
首先说一下网上其他的编辑器：轻量级：1.codeMirror ：文档和代码对不上，没有diff功能github地址：https://github.com/codemirror/CodeMirror示例代码：https://uiwjs.github.io/react-codemirror/2.react-code-diff 最近一次维护2018年，直接报错无法使用重量级：1.monaco ：微软出品，值得信赖github地址：https://github.com/microsoft/mona
2021-12-27 19:05:43
5526
5
原创 关于img标签缩小后模糊的解决方案
网上尝试方案：1.image-rendering: pixelated; // 像素化，出现锯齿状，pass2.image-rendering: crisp-edges; // 无效3.只设置width // 无效，还是会模糊最终解决方案：width: 100px;height: 200px;object-fit: cover;关于很多人分不清object-fit各个参数的效果，其实根据单词含义能推测出来：原图：1.fill：充满拉伸图片达到设置的宽高（在contain的基础下，哪
2021-08-25 16:24:36
5414
1
原创 关于html毛玻璃效果
1.backdrop-filter使用方法：当前页面使用，适用于当前元素背后的所有元素backdrop-filter: blur(5px);缺点：安卓兼容性不佳2.filter使用方法：背后页面使用，适用于当前元素filter: blur(5px);缺点：会有一圈白边，因为模糊图片边缘会使body的背景色透出来，而body一般是白底的。解决方法如下对于小图：给包含它的父元素添加一个 overflow: hidden对于背景图：a.如果不需要考虑细节，把图片比例调大一点：f
2021-06-21 12:11:37
678
原创 react生命周期
函数何时调用其他典型场景constructor组件创建时唯一可以直接修改state，很少使用初始化内部状态getDerivedStateFromProps外部传入属性发生变化,例如：setState(),forceUpdate()state需要从props初始化时使用，每次render都会调用。维护两者状态一致会增加复杂度，尽量不要使用表单控件获取默认值shouldComponentUpdate属性变化时，除了forceUpdate()决定Virtual...
2021-04-14 15:06:54
89
原创 Flutter 实现切角渐变矩形
实现效果实现思路：Stack绝对定位，一个靠左一个靠右，右边的按钮切角后压在左边按钮上边代码：// 自定义梯形切角class TrapezoidPath extends CustomClipper<Path> { @override Path getClip(Size size) { var path = Path(); path.moveTo(0, 77.w);//x,y坐标 path.lineTo(25.w, 0); path.lineTo
2020-11-27 12:43:19
1420
3
原创 flutter 软键盘弹出dialog不上移问题
问题：dialog中有输入框，点击输入框，输入框上移，dialog不上移导致dialog白屏解决方法：外层包一层Scaffold代码如下：showDialog( context: ctx, builder: (ctx) { //修复键盘弹出弹窗不上移问题 return GestureDetector( onTap: () => Navigator.pop(), behavior: HitTestBehavior.opaque
2020-09-27 14:06:29
1334
原创 Flutter 模仿银行卡号等长号码输入分段显示
效果展示初始想法：本来想直接四个输入框，然后监听输入满四个字符，自动next焦点，但是粘贴显示的交互不太友好，加上四个textController + 四个FocusNode总感觉太冗余最终想法：模拟一个输入框和光标，真正的输入框用Stack绝对定位到假输入框正上方，用户点击假的输入框其实是点击了上面的输入框，同时唤起键盘，监听到用户输入后，再使用setState改变文本显示。全部代码：/* * * 输入框 * 允许十六位字母+数字格式 * 分开显示 每组四个字符 * */class L
2020-09-03 20:26:39
677
原创 Flutter 组件切换动画
两个组件切换动画代码：Stack( overflow: Overflow.visible, children: <Widget>[ AnimatedCrossFade( firstChild: _getOpenPackageItem(i), secondChild: _getClosePackageItem(i), crossFadeState: !state.isClose[i] ? CrossFadeState.showFirst : CrossFad
2020-08-26 18:16:48
774
原创 showModalBottomSheet高度自适应
关于showModalBottomSheet高度自适应需求：1.showModalBottomSheet根据内容大小高度自适应2.超出最大高度（例如屏幕的三分之二）可以滑动3.键盘弹出时自适应 static showBottomPop(BuildContext context) { return showModalBottomSheet( context: context, isScrollControlled: true, //可滚动 解除showMod
2020-08-11 14:49:49
4324
原创 html中img图片截取显示中间部分
由于需求要求图片居中显示，同时要有图片加载错误的处理，所以排除了css的background-position方法html代码：<img src="' + cover + '" onerror="this.src=assets/pro-ping.png;" onload=imgOnload(this) />js代码：function imgOnload(e) { conso...
2020-04-24 10:44:39
9196
2
原创 记录一下iframe的坑
关于为什么要用iframe，主要是因为几个页面有一个共同的导航栏，为了防止代码重复所以使用了iframe。1.iframe父子页面DOM访问从父页面直接访问子页面的DOM和从子页面直接访问父页面的DOM都是找不到的，由于我比较习惯用IQ所以以下代码都是JQ语句1.1 如何在父页控制子页面的DOM父页面js：$("iframe").contents().find(".子页面DOM节...
2020-04-04 00:21:21
430
原创 记录一下CocoaPods的一些问题
Ruby的版本$ gem update --system # 这里请翻墙一下$ gem -v2.6.3 # 建议 2.6.x 以上替换源$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/$ gem sources -lhttps://gems.ruby-china.com ...
2019-12-03 14:42:32
71
原创 Flutter踩坑小总结01----FutureBuilder
Flutter踩坑小总结01关于组件FutureBuilderFutureBuilder的使用方法功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchar...
2019-11-13 10:46:00
1222
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人