thor-p v0.0.3

Tesla-UI

卓健科技VUE组件库

DEMO

http://ui.ucmed.cn

使用说明

如果这是您第一次使用VUE开发项目，可以移步 入门文档>>

组件库目前仅在公司内部使用。

所以，在下载组件库前，需先将npm镜像设置为公司镜像

cnpm config set registry http://192.168.0.129:7001

安装组件库

cnpm i @cnpm/tesla-ui --save

配置

//main.js
import ts from '@cnpm/tesla-ui'
import '@cnpm/tesla-ui/dist/index.css'
Vue.use(ts)

说明：也可以不在main.js里引入，在具体页面按需引入相关组件

本组件库大部分组件参照element-ui组件编写，在element-ui的基础上按照公司规范做了样式修改。安装组件库后可以直接使用element-ui组件获得修改样式后的tesla-ui组件。

element-ui参考文档：http://element-cn.eleme.io/1.4/#/zh-CN

命令行工具 (CLI)

我们也提供了一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

cnpm i teslapro-cli -g
tesla init td [project]

参考链接：http://192.168.0.116/AppLab/tesla-cli

下文将列出部分自定义组件的使用API

sidebar 左侧导航

http://ui.ucmed.cn/#/introduction

<ts-sidebar
  :collapsevalue="collapsevalue"
  :routeMenu="routeMenu"
  :logo="logo"
  :simpleLogo="simpleLogo">
</ts-sidebar>

API

Props

navbar 顶部导航

http://ui.ucmed.cn/#/introduction

<ts-navbar 
  :userInfo="userInfo" 
  :userMenu="userMenu" 
  :topMenu="topMenu" 
  :defaultActive="activeIndex" 
  :disCollapse="disCollapse"
  @sidebarHide="hideside" 
  @userItemClick="useritemclick"
  @menuItemClick="menuitemclick">
  <router-view></router-view>
</ts-navbar>

API

Props

Events

login 登录

http://ui.ucmed.cn/#/login

<ts-login :top-tab="toptab" :tab-index="tabindex">
  <template v-if="tabindex.index==1">
    tab1
  </template>
  <template v-if="tabindex.index==2">
    tab项最多支持2项。2项时必须配置tab-index。
  </template>
</ts-login>

API

Props

说明：登录表单内部内容自由发挥。组件库定义了几套样式提供参考使用

<!--登录-->
<div class="ts-loginlabel username" style="margin-top:20px;">
  <input type="text" placeholder="请输入用户名" />
</div>
<div class="ts-loginlabel password">
  <input type="password" placeholder="请输入密码" />
</div>
<div class="ts-loginlabel">
  <el-checkbox v-model="checked">10天内自动登录</el-checkbox>
  <a class="ts-fogot" @click="$router.push('foget')">忘记密码？</a>
</div>
<div class="ts-loginlabel">
  <el-button type="primary" @click="login">登录</el-button>
</div>

<!--忘记密码-->
<a class="back" @click="back">返回上级</a>
<el-steps class="ts-loginsteps" :active="active" style="margin-top:15px;">
  <el-step title="填写账号"></el-step>
  <el-step title="安全验证"></el-step>
  <el-step title="设置新密码"></el-step>
</el-steps>
<div class="ts-loginlabel username" style="margin-top:10%;">
  <input type="text" placeholder="请输入用户名" />
</div>
<div class="ts-loginlabel yzm hasbtn">
  <input type="text" placeholder="请输入密码" />
  <el-button type="info">发送验证码</el-button>
</div>
<div class="ts-loginlabel" style="margin-top:5%;">
  <el-button type="primary" @click="next">下一步</el-button>
</div>

nodata 无数据

http://ui.ucmed.cn/#/other/nodata

<ts-nodata 
  :text="text" 
  :textstyle="textstyle" 
  :type="type" 
  :layout="layout" 
  :size="size" 
  :orient="orient">
</ts-nodata>

API

Props

text 文本内容

textstyle 字相对于图的摆放位置

type 图片链接

layout 图片的摆放方式

size 图片尺寸

orient 整体模块与其它模块的摆放方式

breadcrumb 面包屑

http://ui.ucmed.cn/#/basic/breadcrumb

<ts-breadcrumb separator="/" :underline="underline">
  <el-breadcrumb-item>首页</el-breadcrumb-item>
  <el-breadcrumb-item>面包屑</el-breadcrumb-item>
</ts-breadcrumb>

API

Props