立体键盘/盲打练习

  1. 演示

  2. 按键数据准备
    onInit: $v.keys, $v.label

  1. 按键布局
    数据组件嵌套,动态类名,组件树hover高亮

  2. 外观
    CSS变量:一次定义多次使用
    颜色变量:不仅用于字体颜色还用在按下状态的边框和阴影中
    box-shadow, preserve-3d, perspective

  1. onKeyDown
    $event.code,$event.preventDefault(),添加类名

  2. onKeyUp
    清除类名

  3. 盲打
    $v.all:除了Fn和MetaLeft外的所有按钮
    定义函数,执行函数

  4. 动效
    transition,animation,背光

Make in ZC APP Platform