current position:Home>Plug in download instructions and introduction of Vue in the web front end, NPM, install, save

Plug in download instructions and introduction of Vue in the web front end, NPM, install, save

2022-06-24 07:55:06Web half morning


1、 Menu navigation 、 Recursive plug-in

1、 Download command

npm install mj-menu --save

2、 Parameter Introduction

Parameters describe Whether must
mjMenuTree data source true
selectCallback Menu activated callback false
openCallbacksub-menu Expanded callback false
closeCallbacksub-menu Retracted callback false

3、 Local use
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: " Class A  1",
          children: [
            {
    
              id: "2",
              label: " second level  1-1",
              children: [
                {
    
                  id: "3",
                  label: " Level three  1-1-1",
                },
              ],
            },
          ],
        },
        {
    
          id: "4",
          label: " Class A  2",
          children: [
            {
    
              id: "5",
              label: " second level  2-1",
              children: [
                {
    
                  id: "6",
                  label: " Level three  2-1-1",
                },
              ],
            },
            {
    
              id: "7",
              label: " second level  2-2",
              children: [
                {
    
                  id: "8",
                  label: " Level three  2-2-1",
                },
              ],
            },
          ],
        },
        {
    
          id: "9",
          label: " Class A  3",
          children: [
            {
    
              id: "10",
              label: " second level  3-1",
              children: [
                {
    
                  id: "11",
                  label: " Level three  3-1-1",
                },
              ],
            },
            {
    
              id: "12",
              label: " second level  3-2",
              children: [
                {
    
                  id: "13",
                  label: " Level three  3-2-1",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {
    
    this.menuTree = this.handleMenuTree(this.menuTrees);
  },

  methods: {
    
    // sub-menu Retracted callback 
    closeCallback(val) {
    
      console.log("sub-menu Retracted callback :", val);
    },
    // sub-menu Expanded callback 
    openCallback(val) {
    
      console.log("sub-menu Expanded callback :", val);
    },
    //  Menu activated callback 
    selectCallback(val) {
    
      console.log(" Menu activated callback :", val);
    },
    //  Random generation menu icon 
    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;
    },
  },
};

copyright notice
author[Web half morning],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/175/202206240415389175.html

Random recommended