发表于

重置初始路由逻辑：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const routes = [
  { path, name, component },
  ...
]

const createRouter = () => new VueRouter({ routes })

const router = createRouter()

function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher
}

export { router, resetRouter }

动态加载逻辑：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
resetRouter() // 重置路由

const addRoutes = [..., { path, name, component }]

// 404页面必须最后加
addRoutes.push({
  path: '*',
  name: '__any__',
  redirect: to => {
    return {
      name: 'ErrorPage',
    }
  },
})
for (const route of addRoutes) {
  router.addRoute(route)
}

一般是需要在router.beforeEach进行动态路由添加，且next必须使用以下方法进行

1
2
3
4
router.beforeEach(async (to, from, next) => {
  // ...动态添加路由操作
  next({ ...to, replace: true }) // hack方法 确保addRoute已完成
})

发表于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
const elTransition = '0.3s all ease';
const Transition = {
  beforeEnter(el) {
    el.style.transition = elTransition;
    if (!el.dataset) el.dataset = {};

    el.style.height = 0;
    el.style.opacity = 0;
  },

  enter(el) {
    if (el.scrollHeight !== 0) {
      el.style.height = `${el.scrollHeight}px`;
      el.style.opacity = 1
    } else {
      el.style.height = '';
      el.style.opacity = ''
    }
    el.style.overflow = 'hidden';
  },

  afterEnter(el) {
    el.style.transition = '';
    el.style.height = '';
    el.style.opacity = ''
  },

  beforeLeave(el) {
    if (!el.dataset) el.dataset = {};
    el.style.display = 'block';
    el.style.height = `${el.scrollHeight}px`;
    el.style.overflow = 'hidden';
    el.style.opacity = 1
  },

  leave(el) {
    if (el.scrollHeight !== 0) {
      el.style.transition = elTransition;
      el.style.height = 0;
      el.style.opacity = 0;
    }
  },

  afterLeave(el) {
    el.style.transition = '';
    el.style.height = '';
    el.style.opacity = ''
  },
};

export default {
  name: 'CollapseTransition',
  functional: true,
  render(h, { children }) {
    const data = {
      on: Transition,
    };
    return h('transition', data, children);
  },
};

应用：左边导航栏树型组件动画

1
2
3
4
5
6
7
8
9
10
<template>
  <div class="level-1">
    <div class="label"></div>
    <collapse-transition>
      <div class="level-2-menu" v-show="levelOne.expand">
        ...
      </div>
    </collapse-transition>
  </div>
</template>

发表于

“html2canvas”: “^1.3.2”，最新版已经支持scale，网上搜索的图片模糊解决方案均已过时

一般使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// "html2canvas": "^1.3.2"
import html2canvas from 'html2canvas'

const options = {
  scale: window.devicePixelRatio, // 添加的scale参数
  useCORS: true, // 【重要】开启跨域配置，否则iOS会报【DOM Exception 18: The operation is insecure】
  backgroundColor: '#FFF', // null
}

// 保证在最顶层，不然出现了滚动条后，不在最顶层截图时会出现截图空白
html2canvas(document.querySelector('.container'), options)
  .then(canvas => {
    // base64渲染方法
    const base64Url = canvas.toDataURL('image/jpeg', 0.9)

    // 图片转换成文件提交方法
    // 不能大于1m，否则报错，所以使用jpg并且压缩0.9
    canvas.toBlob((blob) => {
      const formData = new FormData();
      // 钉钉的消息通知只认png和jpg结尾的文件为图片，不能使用jpeg作为后缀，否则推送不成功
      formData.append('uploadFile', blob, `test.jpg`);
      // 发送formData类型到后端
      request(formData)
    }, 'image/jpeg', 0.9);
  })
  .catch(err => {

  })
阅读全文 »

发表于

iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。

适配之前需要了解的几个新知识

安全区域

安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响

设计标准：所有组件尺寸均按 iphone6 375pt x 667pt (@1x) 进行设计。适配 iphone X 时，HomeIndicator 预留的高度为 34pt；顶部刘海区域预留高度为 44pt (官方建议预留高度)。

也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。

更详细说明，参考文档： Human Interface Guidelines - iPhoneX

阅读全文 »

发表于

如果使用了最新版的node安装hexo-cli，然后项目安装hexo，会出现打包的文件为空的问题。这个是node的版本问题，使用nvm切换至node版本为13.14.0，然后重新全局安装hexo-cli和项目安装hexo，此时就会恢复正常

发表于

原理

进入页面后添加该页面至缓存。如果是replace进入的则不进行缓存操作；

退出页面的时候移除该页面的缓存；

添加缓存必须是进入页面后再加，这样下次进入才是缓存，而不是进入前加入缓存，进入后立刻获取上一个状态的缓存

阅读全文 »

发表于

进行多语言设定的时候，有时会有导出json的key值到excel，然后在excel进行语言配置，然后再使用excel导出多个国际语言的需求

以下的代码是进行第一步的代码，csv后缀改为xlsx即可

1
2
3
4
5
6
/* 此文件用于导出需要做国际化翻译的语句 */
const fs = require('fs');
const json = require('./lang-en.json');

const array = Object.keys(json);
fs.writeFile('need-translate.csv', array.join('\r\n'), () => console.log('写入完毕'));

发表于

先说核心的代码：

1
2
var scale = 1 + Math.abs(scrollY / imgHeight);
imgRef.style.transform = `scale(${scale})`

scrollY是监听滚动的垂直距离，向上滑动scrollY为正，向下拉scrollY为负，推荐配合better-scroll插件进行开发

利用scall，进行scrollY和heigth的占比加上1的值，即可平滑放大

以下为demo代码（配合等比图片实现）：

阅读全文 »

发表于

先说核心的代码：

1
padding-top: 222%; // 高比宽长，百分比就是大于100%的

比如要实现一个长宽为580x1289的等比图片展示（等比图片大多数要求在移动端，一些列表或顶部图片的需求），这时候需要使用一个容器包着img，容器的长度为100%，如果要控制长度，需要在容器的外层再包一层，用于长度控制。

最主要的等比是使用padding-top属性。比如我的图片是580x1289，那就要设置padding-top为（1289/580*100%）的百分比，就是222%。

以下为demo代码：

阅读全文 »