Menu.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. export default class Menu {
  2. constructor(Dcat) {
  3. this.init();
  4. this.initHorizontal();
  5. }
  6. // 菜单点击选中效果
  7. init() {
  8. if (! $('.main-sidebar .sidebar').length) {
  9. return;
  10. }
  11. // 滚动条优化
  12. new PerfectScrollbar('.main-sidebar .sidebar');
  13. let $content = $('.main-menu-content'),
  14. $items = $content.find('li'),
  15. $hasSubItems = $content.find('li.has-treeview');
  16. $items.find('a').click(function () {
  17. let href = $(this).attr('href');
  18. if (! href || href === '#') {
  19. return;
  20. }
  21. $items.find('.nav-link').removeClass('active');
  22. // $hasSubItems.removeClass('menu-open');
  23. $(this).addClass('active')
  24. });
  25. // 启用sidebar_collapsed模式后点击菜单自动缩进
  26. $('.sidebar-collapse .main-sidebar .nav-item .nav-link[href]').on('click', function () {
  27. var href = $(this).attr('href');
  28. if (href !== '#' && href !== 'javascript:void(0)') {
  29. $('.sidebar-collapse .main-sidebar').removeClass('sidebar-focused');
  30. }
  31. });
  32. }
  33. initHorizontal() {
  34. let selectors = {
  35. item: '.horizontal-menu .main-menu-content li.nav-item',
  36. link: '.horizontal-menu .main-menu-content li.nav-item .nav-link',
  37. };
  38. $(selectors.item).on('mouseover', function () {
  39. $(this).addClass('open')
  40. }).on('mouseout', function () {
  41. $(this).removeClass('open')
  42. });
  43. $(selectors.link).on('click', function () {
  44. let $this = $(this);
  45. $(selectors.link).removeClass('active');
  46. $this.addClass('active');
  47. $this.parents('.dropdown').find('.nav-link').eq(0).addClass('active');
  48. $this.parents('.dropdown-submenu').find('.nav-link').eq(0).addClass('active')
  49. });
  50. // 自动计算高度
  51. let $horizontalMenu = $('.horizontal-menu .main-horizontal-sidebar'),
  52. defaultHorizontalMenuHeight = 0,
  53. horizontalMenuTop = 0;
  54. // 重新计算高度
  55. let resize = function () {
  56. if (! $('.horizontal-menu').length) {
  57. return;
  58. }
  59. if (! defaultHorizontalMenuHeight) {
  60. defaultHorizontalMenuHeight = $horizontalMenu.height()
  61. }
  62. if (! horizontalMenuTop) {
  63. horizontalMenuTop = $horizontalMenu.offset().top + 15;
  64. }
  65. let height = $horizontalMenu.height(),
  66. diff = height - defaultHorizontalMenuHeight,
  67. $wrapper = $('.horizontal-menu.navbar-fixed-top .content-wrapper');
  68. if (height <= defaultHorizontalMenuHeight) {
  69. return $wrapper.css({'padding-top': horizontalMenuTop + 'px'});
  70. }
  71. $wrapper.css({'padding-top': (horizontalMenuTop + diff) + 'px'});
  72. };
  73. window.onresize = resize;
  74. resize();
  75. }
  76. }