index.js 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. import { mapGetters } from "vuex";
  2. import "./index.scss";
  3. export default {
  4. name: "cl-menu-slider",
  5. data() {
  6. return {
  7. visible: true
  8. };
  9. },
  10. computed: {
  11. ...mapGetters(["menuList", "menuCollapse", "browser"])
  12. },
  13. watch: {
  14. menuList() {
  15. this.visible = false;
  16. setTimeout(() => {
  17. this.visible = true;
  18. }, 0);
  19. }
  20. },
  21. methods: {
  22. toView(url) {
  23. if (url != this.$route.path) {
  24. this.$router.push(url);
  25. }
  26. }
  27. },
  28. render() {
  29. const fn = (list) => {
  30. return list
  31. .filter((e) => e.isShow)
  32. .map((e) => {
  33. let html = null;
  34. if (e.type == 0) {
  35. html = (
  36. <el-submenu index={String(e.id)} key={e.id}>
  37. <template slot="title">
  38. <icon-svg name={e.icon}></icon-svg>
  39. <span slot="title">{e.name}</span>
  40. </template>
  41. {fn(e.children)}
  42. </el-submenu>
  43. );
  44. } else {
  45. html = (
  46. <el-menu-item index={e.path} key={e.path}>
  47. <icon-svg name={e.icon}></icon-svg>
  48. <span slot="title">{e.name}</span>
  49. </el-menu-item>
  50. );
  51. }
  52. return html;
  53. });
  54. };
  55. let el = fn(this.menuList);
  56. return (
  57. this.visible && (
  58. <div class="cl-slider-menu">
  59. <el-menu
  60. default-active={this.$route.path}
  61. collapse-transition={false}
  62. collapse={this.browser.isMobile ? false : this.menuCollapse}
  63. on-select={this.toView}>
  64. {el}
  65. </el-menu>
  66. </div>
  67. )
  68. );
  69. }
  70. };