❤
npm
Sign UpSign In

thor-p

0.0.3 • Public • Published

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（230*56）
simpleLogo false url 导航折叠时顶部logo（80*56）

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 设置是否显示下划线

Readme

Keywords

none

Package Sidebar

Install

npm i thor-p

Weekly Downloads

1

Version

0.0.3

License

MIT

Last publish

Collaborators

  • zjjnly
Try on RunKit
Report malware