TopBar.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <template>
  2. <div class="top-bar">
  3. <!--系统状态-->
  4. <div class="sys-handler">
  5. <!--菜单折叠控制按钮-->
  6. <sider-trigger :collapsed="collapsed" icon="md-menu" @on-change="handleCollapsedChange"></sider-trigger>
  7. <!--面包屑-->
  8. <bread-crumb show-icon style="margin-left: 30px;" :list="breadCrumbList"></bread-crumb>
  9. </div>
  10. <!--用户-->
  11. <div class="user-container">
  12. <slot></slot>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. import SiderTrigger from './sider-trigger'
  18. import BreadCrumb from './bread-crumb'
  19. import './top-bar.less'
  20. export default {
  21. name: "TopBar",
  22. components: {
  23. 'sider-trigger': SiderTrigger,
  24. 'bread-crumb': BreadCrumb
  25. },
  26. props: {
  27. collapsed:Boolean
  28. },
  29. computed: {
  30. breadCrumbList(){
  31. return []
  32. }
  33. },
  34. methods: {
  35. handleCollapsedChange (state) {
  36. this.$emit('on-coll-change', state)
  37. }
  38. }
  39. }
  40. </script>
  41. <style scoped>
  42. </style>