web前端之vue的插件下载指令及介绍、npm、install、save

---

1、菜单导航、递归插件

1、下载命令

npm install mj-menu --save

---

2、参数介绍

参数	描述	是否必须
mjMenuTree	数据源	true
selectCallback	菜单激活的回调	false
openCallback	sub-menu展开的回调	false
closeCallback	sub-menu收起的回调	false

---

3、局部使用
html

<template>
    <div>
        <mj-menu
            :mjMenuTree="menuTree"
            @selectCallback="selectCallback"
            @openCallback="openCallback"
            @closeCallback="closeCallback"
        ></mj-menu>
    </div>
</template>

---

javaScript

import mjMenu from "mj-menu";

export default {
    
    
  components: {
    
     mjMenu },
  data() {
    
    
    return {
    
    
      menuTree: [],
      menuTrees: [
        {
    
    
          id: "1",
          label: "一级 1",
          children: [
            {
    
    
              id: "2",
              label: "二级 1-1",
              children: [
                {
    
    
                  id: "3",
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
    
    
          id: "4",
          label: "一级 2",
          children: [
            {
    
    
              id: "5",
              label: "二级 2-1",
              children: [
                {
    
    
                  id: "6",
                  label: "三级 2-1-1",
                },
              ],
            },
            {
    
    
              id: "7",
              label: "二级 2-2",
              children: [
                {
    
    
                  id: "8",
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
    
    
          id: "9",
          label: "一级 3",
          children: [
            {
    
    
              id: "10",
              label: "二级 3-1",
              children: [
                {
    
    
                  id: "11",
                  label: "三级 3-1-1",
                },
              ],
            },
            {
    
    
              id: "12",
              label: "二级 3-2",
              children: [
                {
    
    
                  id: "13",
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {
    
    
    this.menuTree = this.handleMenuTree(this.menuTrees);
  },

  methods: {
    
    
    // sub-menu收起的回调
    closeCallback(val) {
    
    
      console.log("sub-menu收起的回调:", val);
    },
    // sub-menu展开的回调
    openCallback(val) {
    
    
      console.log("sub-menu展开的回调:", val);
    },
    // 菜单激活的回调
    selectCallback(val) {
    
    
      console.log("菜单激活的回调:", val);
    },
    // 随机生成菜单图标
    handleMenuTree(menuTrees) {
    
    
      let icon = [
        "el-icon-setting",
        "el-icon-user",
        "el-icon-star-off",
        "el-icon-warning-outline",
        "el-icon-upload",
        "el-icon-s-order",
        "el-icon-c-scale-to-original",
        "el-icon-coin",
        "el-icon-receiving",
        "el-icon-cpu",
        "el-icon-sugar",
        "el-icon-ice-cream-square",
        "el-icon-milk-tea",
        "el-icon-watch",
        "el-icon-mobile",
        "el-icon-tickets",
      ];

      menuTrees.forEach((item) => {
    
    
        let indexRandom = Math.floor(Math.random() * (15 - 0 + 1)) + 0;
        item.icon = icon[indexRandom];

        if (item.children) this.handleMenuTree(item.children);
      });

      return menuTrees;
    },
  },
};