Lake UI

Lake UI

安装

npm install @ali/lake-ui

使用

// main.js
import LakeUI from '@ali/lake-ui'
import '@ali/lake-ui/lib/lake-ui.css';

Vue.use(LakeUI)

// demo.vue

<template>
  <div class="demo">
    <lake-nav></lake-nav>
  </div>
</template>

更新日志

• 0.0.1 正式版本
• 0.0.2 应用中心改为hover触发
• 0.0.3 支持应用中心icon传空字符串
• 0.0.4 弹窗风格更新
• 0.0.5 支持右键新窗口打开
• 0.0.6 新版UI风格
• 0.0.7 新版UI风格,bugfix

文档

LakeNav

• 何时使用

  • 整个应用的导航栏，用于应用页面最顶部

• 代码演示

    <lake-nav :app="apps">
      <template slot="title">title</template>
      <template slot="tag">tag</template>
      <template slot="right">right</template>
    </lake-nav>

• Props

  • app: Array，用于渲染左上角应用中心，样例数据如下，url为跳转链接，icon支持网络图片、base64编码或者ant-design-vue-icon的type属性内容

  [
    { id: 1, name: '工作台', url: '/#/home', icon: 'bank' },
    { id: 2, name: '项目协作', url: '/#/project', icon: 'project' },
    { id: 3, name: '用例库', url: '', icon: 'experiment' },
    { id: 4, name: '缺陷中心', url: '', icon: 'bug' },
  ]

• Slot

  • title：将被放置在Logo右侧，一般用作页面标题
  • tag：将被放置在title右侧，用于放置副标题或其他次要内容
  • right：将放置在导航栏中最右侧位置，一般用于放置用户头像、下拉菜单等内容