中国色

  1. 演示

  2. 准备数据
    把颜色分成九组,即$v.groups:红,黄,绿,蓝,苍,水,灰白,黑,金银
    每组有多个具体颜色,包含名称,拼音,图片,三种格式的颜色值(hex、RGB、CMYK)

  1. 数据组件

  2. 动态样式

  3. 伸展、收缩

  4. 点击事件
    赋值$v.group,$v.color,并设置背景色和前景色(前景色根据与背景色的色差来决定用白色还是黑色)

  1. flex弹性布局

  2. 指定组里的颜色列表
    用4个svg来表示颜色的cmyk值(strokeDasharray)
    用3条线来表示颜色的rgb值(动态样式)

  3. 颜色细节

  4. 复制颜色(copy-to-clipboard)

  5. 颜色卡片
    使用自定义字体TChinese

  6. 标题

  1. 收藏
    图标变化,收藏与取消收藏

  2. 展示按钮
    更改颜色组数据组件的循环子组件下标

  3. localStorage持久化
    颜色组对group和color序号的持久
    颜色列表对color序号的持久
    收藏按钮对favorite的持久
    onReady对已持久数据的恢复

Make in ZC APP Platform