来自分类 前端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...
来自分类 React2019-12-28 19:16:01
需求: 1、需要路由切换动画, 2、从详情页返回列表页时, 需要滚动到历史位置 咋一看, 这不挺简单的吗? 使用`redux`做数据的临时存储, 在`componentWillUnmount`钩子里, 读取滚动条位置, 然后保存到本地存储 当从详情页或者其他页面返回列表页时, 判断`redux`里是否有数据, 如果有数据直接读取, 不再发起请求, 在`componentDidMount`钩子里读取本地存储的滚动条位置, 然后滚动到相应位置不就行了吗 上面的思路在没有路由动画时, 是可行的, 但是有路由动画的话, 就不行了, 你会发现在`componentWillUnmount`钩子里取到的滚动条位置, 总是不对的 主要原因是, 为了用户体验, 在详情页需要`componentDidMount`钩子里将滚动条设置为0, 不然在进入详情页时, 滚动条位置会不在顶部 再加上, 添加了路由动画后, 从列表页进入详情页, 有一小段时间, 列表页和详情页这两个组件会同时存在, 而且两个页面钩子的执行顺序为: 详情页的`componentDidMount` => 列表页的`compone...
来自分类 Vue2019-12-25 15:52:49
# 1. 首先你得有台服务器 # 2. 推荐安装 linux 系统 本文以 CentOS 7.2 为例 # 3. 更换 yum 为国内镜像 1. 备份你的原镜像文件,以免出错后可以恢复。 ```bash # mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup ``` 2. 下载新的CentOS-Base.repo 到/etc/yum.repos.d/ ```bash // CentOS 5 # wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-5.repo // CentOS 6 # wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-6.repo // CentOS 7 # wget -O /etc/yum.repos.d/CentOS-Base.repo h...
来自分类 Vue2019-11-13 10:42:25
假设在根组件用 dispatch 触发一个异步的 Action ```javascript async created() { await this.$store.dispatch(`base/info/get`) }, ``` 在路由组件里 watch 数据 ```javascript computed: { ...mapGetters({ $$info: 'base/info/get' }) }, watch: { $$info(val) { console.log(val) } } ``` 刷新页面, 这时候会出现有时候能触发 watch, 有时候又不触发, 这到底是什么原因呢? 看 vue 的源代码: https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js#L48-L62 ```javascript export function initState (vm: Component) { vm._watchers = []...
来自分类 前端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://...
来自分类 其他2019-10-29 11:06:38
``` 注意: 这个 SSR 不是 Vue 的服务端渲染 ``` ### 1. 安装 SSR https://github.com/qinyuhang/ShadowsocksX-NG-R/releases ### 2. 在 SSR 里导入自己的节点 ### 3. 配置文件 打开`$HOME/Library/Application Support/ShadowsocksX-NG/`, 可以看到`ss-local-config.json`文件, 这个是当前`SSR`使用的配置文件, 复制一份, 重命名为`ss-local-config-hk.json`或者其他名字 编辑`ss-local-config-hk.json`的节点信息, 如果不知道怎么编辑, 简单的方法, 就是在`SSR`里切换到你想要的节点, 然后把`ss-local-config.json`里的内容复制过来, 要注意的是, `local_port`(本地SOCKS5监听的端口)必须唯一, 如改成`2080`, 不能和其他的配置文件一样 ### 4. 执行 在`$HOME/Library/Application...
来自分类 Vue2019-07-08 15:44:55
随着手机浏览器的不断更新, 现在开发移动端, 适配解决方案当属`rem + vw` Vant 文档中虽然有 REM 适配的方法, 试用 postcss-pxtorem 和 lib-flexible, 但是由于 Vant 设计稿应该是用 375 分辨率的, 如果我们的设计稿是 640 或者 750的, 换算起来则有些麻烦 ``` module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] } } } ``` 这里如果直接修改了`rootValue`来适配我们自己的设计稿, 可能会导致 Vant 的 rem 数值偏小 先看`rem + vw`的 less 配置: ```less // 设计稿宽度 @vm_design: 750; // 为什么设置 100? 设置成便于计算, 计算r...
来自分类 前端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...
来自分类 Vue2018-09-28 17:04:49
#### 1. 不设置 router-view 的 key 属性 由于 Vue 会复用相同组件, 即 `/page/1` => `/page/2` 或者 `/page?id=1` => `/page?id=2` 这类链接跳转时, 将不在执行`created, mounted`之类的钩子, 这时候你需要在路由组件中, 添加`beforeRouteUpdate`钩子来执行相关方法拉去数据 相关钩子加载顺序为: beforeRouteUpdate #### 2. 设置 router-view 的 key 属性值为 $route.path 从`/page/1` => `/page/2`, 由于这两个路由的`$route.path`并不一样, 所以组件被强制不复用, 相关钩子加载顺序为: beforeRouteUpdate => created => mounted 从`/page?id=1` => `/page?id=2`, 由于这两个路由的`$route.path`一样, 所以和没设置 key 属性一样, 会复用组件, 相关钩子加载顺序为: beforeRouteUpdate #...
来自分类 Vue2018-08-28 15:31:40
有这么一个需求, 需要在用户离开时, 弹窗让用户选择[是]/[否]按钮来决定页面跳转, 如果选[是]则跳转到一个页面, 选否则留在当前页面 第一想法肯定是在`beforeRouteLeave`做相关逻辑 ```javascript beforeRouteLeave(to, from, next) { const answer = window.confirm('...') if (answer) { next('/some/path') } else { next(false) } } ``` 结果出现了死循环, 因为在调用`next('/some/path')`时, 又触发了`beforeRouteLeave`, 从而又执行了`next('/some/path')`, 所以出现了死循环 处理方法也很简单: ```javascript beforeRouteLeave(to, from, next) { if (to.fullPath === '/some/path') { return ...