web前端之vue的插件下载指令及介绍npminstallsave

Posted 2022-06-25 web半晨

目录

• 1、菜单导航、递归插件

---

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;
    ,
  ,
;