来自分类 前端2020-10-21 13:07:32
#### 代码入下: ```javascript function addGlobalStyle(css) { var head, style head = document.getElementsByTagName('head')[0] if (!head) { return } style = document.createElement('style') style.innerHTML = css head.appendChild(style) } function removeNodeInsertedListener(bindedFunc) { var eventTypeList = ['animationstart', 'webkitAnimationStart', 'MSAnimationStart', 'oAnimationStart'] eventTypeList.forEach(function (eventType) { document.removeEven...
来自分类 前端2020-08-27 13:22:48
#### 问题 很多网站都有类似「点击加载更多」的功能, 点击按钮后请求 ajax,然后在原列表后追加相关内容, 之前一直滚动条位置不变, 追加元素后, 页面还是列表原来的位置 ![](https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/nupohneh7nupehpqnulog/img/loadmore_common.gif) 但是今天发现, 追加元素后, 滚动条位置会自动滚动到「点击加载更多」按钮的位置, 这会造成浏览时很大的麻烦, 加载分页后, 还要往上滚动去找加载分页前的位置, 实在不方便 ![](https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/nupohneh7nupehpqnulog/img/loadmore.gif) 具体例子可以参考百度百科中的角色介绍的展开全部功能, 相关链接: https://baike.baidu.com/item/%E7%AC%91%E5%82%B2%E6%B1%9F%E6%B9%96/10719298#4 一系列的排查之后, 最终发现是浏览器的问题, 受...
来自分类 前端2020-06-24 10:35:08
``` { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] }, "target": "ES6", "module": "commonjs", "allowSyntheticDefaultImports": true, "types": ["uni-app", "html5plus"] }, "include": ["./src/**/*"], "files": ["main.ts"] } ``` 只需要在项目根目录随便创建一个空白的`.ts`文件, 然后在`tsconfig.json`添加`files`键即可, 如上面配置...
来自分类 前端2019-12-28 19:30:34
一年多过去了, `Optional Chaining`终于到`Stage 3`了, vscode 之类编辑器也有办法支持该语法了, 现在想用, 可以用`babel`来实现了 #### 安装插件 ```bash # yarn add @babel/plugin-proposal-optional-chaining --dev // 可选链 # yan add @babel/plugin-proposal-nullish-coalescing-operator --dev // 空值合并 ``` #### 在 babel 配置文件里添加插件 ```javascript plugins: [ // 其他插件 '@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator' ] ``` 这样就可以在 js, jsx, vue 里面用了 ##### 在 .jsx 中使用: ```javascript render() { c...
来自分类 前端2019-11-09 11:52:07
目录 1. [React 相关](#react) 2. [Vue 相关](#vue) - [Vue 组件库](#vue-components) - [Vue 表单](#vue-form) - [Vue 操作](#vue-handle) - [Vue 图片](#vue-image) - [Vue 通知](#vue-notice) - [Vue 其他](#vue-other) 3. [小程序相关](#weapp) 4. [前端 UI 框架](#ui) 5. [CSS 相关](#css) 6. [单页](#spa) 7. [表单相关](#form) 8. [弹出相关](#dialog) 9. [开发工具](#devtools) 10. [移动端相关](#mobile) 11. [鼠标相关](#mouse) 12. [数据处理](#data) 13. [图片相关](#image) 14. [动画相关](#animation) 15. [项目资料](#information) 16. [其他相关](#other) # react React 相关 ===实例=== https://...
来自分类 前端2018-11-15 11:39:55
### 1. 用 Canvas 生成图片 ```javascript const getQrCode = () => { const drp = 2 const width = 290.5 * drp const height = (width * 462) / 290.5 const c = document.getElementById('myCanvas') const ctx = c.getContext('2d') ctx.fillStyle = '#fff' ctx.fillRect(0, 0, width, height) return c.toDataURL('image/jpeg') } ``` ### 2. 将 dataURL 转成 Blob ```javascript const dataURItoBlob = dataURI => { var byteString if (dataURI.split(',')[0].indexOf('base64') >= 0) byteStrin...
来自分类 前端2017-12-18 15:07:55
### nvm 使用淘宝镜像 ```bash export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node export NVM_IOJS_ORG_MIRROR=https://npm.taobao.org/mirrors/iojs ``` ### npm 使用淘宝镜像安装包 相关文件: ~/.npmrc ```bash npm config set registry https://registry.npm.taobao.org npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ npm config set electron_mirror https://npm.taobao.org/mirrors/electron/ npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/ ``` ### yarn 使用淘宝镜像安装包 相关...
来自分类 前端2017-04-08 17:29:12
用了很久的 atom 了, 对于在 .vue 里不能用 emmet 一直感到很郁闷, 今天在看 emmet-atom 的 issue 时, 无意中发现了解决方法: https://github.com/emmetio/emmet-atom/issues/364 点击`文件 - 用户键盘映射`打开配置文件 在配置文件的最后添加 ``` 'atom-text-editor[data-grammar~="vue"]:not([mini])': 'tab': 'emmet:expand-abbreviation-with-tab' ``` 注意: 如果配置文件中已经有`'atom-text-editor[data-grammar~="vue"]:not([mini])':`的其他配置, 那么要在其他配置的下面直接添加`'tab': 'emmet:expand-abbreviation-with-tab'`, 而不能直接添加上面的两行, 不然会报错 重启编辑器 这样就可以愉快的玩耍了......
来自分类 前端2016-12-07 22:12:00
[Async 文档](http://blog.fens.me/nodejs-async/) [Bootstrap 中文文档](http://www.bootcss.com/) [CSS参考手册](http://css.doyoe.com/) [cooking 中文文档](http://cookingjs.github.io/zh-cn/index.html) [DevDocs API文档](http://devdocs.io/) [Emmet 文档](http://docs.emmet.io/cheat-sheet/) [ESLint 中文文档](http://eslint.cn/docs/rules/) [Flex 布局教程](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) [iScroll 5 API 中文版](https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/index.html) [JavaScript 中文文档](https://d...
来自分类 前端2016-12-07 22:12:00
#### 一、校验数字的表达式 * 数字:`^[0-9]*$` * n位的数字:`^\d{n}$` * 至少n位的数字:`^\d{n,}$` * m-n位的数字:`^\d{m,n}$` * 零和非零开头的数字:`^(0|[1-9][0-9]*)$` * 非零开头的最多带两位小数的数字:`^([1-9][0-9]*)+(.[0-9]{1,2})?$` * 带1-2位小数的正数或负数:`^(-)?\d+(.\d{1,2})?$` * 正数、负数、和小数:`^(-|+)?\d+(.\d+)?$` * 有两位小数的正实数:`^[0-9]+(.[0-9]{2})?$` * 有1~3位小数的正实数:`^[0-9]+(.[0-9]{1,3})?$` * 非零的正整数:`^[1-9]\d$ 或 ^([1-9][0-9]){1,3}$ 或 ^+?[1-9][0-9]*$` * 非零的负整数:`^-[1-9][0-9]*$ 或 ^-[1-9]\d$`` * 非负整数:`^\d+$ 或 ^[1-9]\d*|0$` * 非正整数:`^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$`` * 非负...