ts-navbar

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

Usage no npm install needed!

<script type="module">
  import tsNavbar from 'https://cdn.skypack.dev/ts-navbar';
</script>

README

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对象|