index.vue 983 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <div
  3. class="vab-layout-comprehensive"
  4. :class="{
  5. fixed: fixedHeader,
  6. 'no-tabs-bar': !showTabs,
  7. }"
  8. >
  9. <vab-side-bar layout="comprehensive" />
  10. <div
  11. class="vab-main"
  12. :class="{
  13. 'is-collapse-main': collapse,
  14. }"
  15. >
  16. <div
  17. class="vab-layout-header"
  18. :class="{
  19. 'fixed-header': fixedHeader,
  20. }"
  21. >
  22. <vab-nav layout="comprehensive" />
  23. <vab-tabs v-show="showTabs" />
  24. </div>
  25. <vab-app-main />
  26. </div>
  27. </div>
  28. </template>
  29. <script lang="ts" setup>
  30. defineOptions({
  31. name: 'VabLayoutComprehensive',
  32. })
  33. defineProps({
  34. collapse: {
  35. type: Boolean,
  36. default() {
  37. return false
  38. },
  39. },
  40. fixedHeader: {
  41. type: Boolean,
  42. default() {
  43. return true
  44. },
  45. },
  46. showTabs: {
  47. type: Boolean,
  48. default() {
  49. return true
  50. },
  51. },
  52. device: {
  53. type: String,
  54. default() {
  55. return 'desktop'
  56. },
  57. },
  58. })
  59. </script>