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

|Prop|Required|Default Value|Description| |:-|:-|:-|:-| |collapsevalue|false|false|导航是否折叠| |routeMenu|true|[{path: '/basic',name: 'basic',meta: {title: '基础',icon: 'setting'},noDropdown: true,children: [{path: 'index',meta: { title: '基础' }}]}]|导航内容参数。noDropdown配置是否可下拉展开，默认为false。meta中title配置文字，icon配置图标| |logo|false|url|导航展开时顶部logo（23056）| |simpleLogo|false|url|导航折叠时顶部logo（8056）|

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

|Prop|Required|Default Value|Description| |:-|:-|:-|:-| |userInfo|false|{userphoto: url,username: string}|用户名字与头像| |userMenu|false|[{text: "首页"},{text: "项目git地址"},{text: "退出登录"}]|用户点击功能列表| |topMenu|false|[{title: "掌上医院",index: "1"},{title: "互联网医院",index: "2"},{title: "双向转诊",index: "3"}]|头部导航列表| |defaultActive|false|number|头部列表默认选中,从1开始| |disCollapse|false|false|是否禁用折叠功能|

Events

|Event|Required|Default Value|Description| |:-|:-|:-|:-| |sidebarHide|false|function|折叠时调用方法| |userItemClick|false||用户功能列表点击调用方法，默认参数为该点击json对象| |menuItemClick|false||头部导航功能列表点击调用方法，默认参数为该点击json对象|

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

|Prop|Required|Default Value|Description| |:-|:-|:-|:-| |topTab|true|toptab: [{text: "账号登录"},{text: "忘記密码"}]|设置tab标签（1-2项）| |logo|false|url|设置登录页logo图片| |tabIndex|false|{index: 1}|设置默认选中的tab标签|

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

<!--登录-->
<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

|Prop|Required|Default Value|Description| |:-|:-|:-|:-| |text|false|string|文本内容| |textstyle|false|false|字相对于图的摆放位置| |type|false|false|图片链接| |layout|false|false|图片的摆放方式| |size|false|false|图片尺寸| |orient|false|false|整体模块与其它模块的排列方式| ||

text [文本内容]

|可选值共15项|||| |:-|:-|:-|:-| |搜索不到相关结果|一条记录都没有|还没有相关报告|还没有缴费记录| |还没有叫号信息|还没有收藏|暂时没有新消息|未添加就诊人| |暂无医生排班|支付成功|支付失败|暂无直播| |暂无科室|网络不太顺畅|找不到相关数据| ||

textstyle [字相对于图的摆放位置]

|序号|可选值|| |:-|:-|:-|:-| |1|lay-horizen|图和文字水平排列| |2|lay-vertical|图和文字垂直排列| ||

type [图片链接]

|序号|可选值|对应text|URL| |:-|:-|:-|:-| |1|search-result|搜索不到相关结果|../img/default/nodata/t1.png| |2|none-record|一条记录都没有|../img/default/nodata/t2.png| |3|relate-repor|还没有相关报告|../img/default/nodata/t3.png| |4|cost-record|还没有缴费记录|../img/default/nodata/t4.png| |5|call-info|还没有叫号信息|../img/default/nodata/t5.png| |6|none-store|还没有收藏|../img/default/nodata/t6.png| |7|none-news|暂时没有新消息|../img/default/nodata/t7.png| |8|none-patient|未添加就诊人|../img/default/nodata/t8.png| |9|none-doctor|暂无医生排班|../img/default/nodata/t9.png| |10|pay-success|支付成功|../img/default/nodata/t10.png| |11|pay-fail|支付失败|../img/default/nodata/t11.png| |12|none-broadcast|暂无直播|../img/default/nodata/t12.png| |13|none-office|暂无科室|../img/default/nodata/t13.png| |14|bad-network|网络不太顺畅|../img/default/nodata/t14.png| |15|none-data|找不到相关数据|../img/default/nodata/t15.png| ||

layout [图片的摆放方式]

|序号|可选值|| |:-|:-|:-|:-| |1|lay-block|与文字不同行| |2|lay-inline-block|与文字同行| ||

size [图片尺寸]

|序号|可选值|| |:-|:-|:-|:-| |1|size1|默认尺寸[ height:160px; width:180px]| ||

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

|序号|可选值|| |:-|:-|:-|:-| |1|layout-vertical|与其它模块不同行摆放| |2|layout-horizen|与其它模块同行摆放| ||

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

|Prop|Required|Default Value|Description| |:-|:-|:-|:-| |underline|false|false|设置是否显示下划线|