litebar.vue 565 B

1234567891011121314151617181920212223242526272829303132
  1. <template>
  2. <div class="banner">
  3. <i class="naf-icons" :class="{ 'naf-icon-unfold': menuCollapse, 'naf-icon-fold': !menuCollapse }" @click="toggleMenu"></i>
  4. <naf-user />
  5. </div>
  6. </template>
  7. <script>
  8. import NafUser from './user';
  9. export default {
  10. components: {
  11. NafUser,
  12. },
  13. props: {
  14. menuCollapse: Boolean,
  15. },
  16. methods: {
  17. toggleMenu() {
  18. this.$emit('toggle-menu');
  19. },
  20. },
  21. };
  22. </script>
  23. <style lang="less" scoped>
  24. .banner {
  25. flex: 1;
  26. display: block;
  27. flex-direction: row;
  28. align-items: center;
  29. padding: 0 20px;
  30. }
  31. </style>