Talk is cheap

Show me the code

正在查看标签 “ 前端 ” 下的文章:

在 vue-router 中访问导航栈

vue 提供了 <transition> 组件来为组件的切换添加动画,得益于这个特性, vue-router 中的 router-view 也可以在切换路由组件时播放动画。自然的,就产生了在前进/后退时使用不同动画的需求。在 vue-router 文档的 Route-Based Dynamic Transition 一节中,提供了这样的写法:

// then, in the parent component,
// watch the `$route` to determine the transition to use
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

根据路径中 / 的个数来判断路由的深度,然后以此决定播放的动画。但事情并不总是那么简单。

- MORE -

MelodyPlayer α 测试

没想到这个坑这么快就填上了,以后我也能在博客里面插入音频啦~~

顺便推荐一首歌,这几天开发的时候一直单曲循环的:

パレットには君がいっぱい · ぽわぽわP

这篇博文还没写完,似乎就又出现了三个 bug ... 囧rz ... 这里就先不立什么新功能的 Flag 了,有机会把 bug 都修掉再考虑吧 ...

- MORE -

制作极限压缩的 Material Icons 图标字体

UPDATE: 写了一个傻傻的 Python 脚本 来自动处理字体,只要将所需要的图标名称每行一个写入 icon-names.txt ,就能一键生成压缩好的字体文件。(2018/04/26)

以下是原文。


这几天挖了 新坑 MelodyPlayer ,其中有用到 Google 的 Material Icons 。虽然它的 woff2 格式只有 42KB ,但我只用了其中的 10 个图标,加载整个字体文件显得很不划算。虽然 Material Icons 提供了制作 Sprite 的方案,但只有 SVG 或 CSS Sprite ,我的用法是 <button> 里写图标的名字,不能兼容。

我不愿意改代码,于是想寻找一种提取字体中特定字符的方法。

经过一番搜索,找到了 fonttools 这个强大的工具,可以精确控制字体文件的每一个 Glyph ,最大限度压缩字体。

- MORE -