如何用vue實現樹形菜單？

時間 2019-12-11

標籤如何 vue 實現菜單简体版

原文原文鏈接

在公司培訓了2周，佈置的做業是從樹形，grid分頁以及echarts中選一個。因爲都不是很熟，就挑了第一個。原本想在網上找找參考，而後模仿着作一個，可是網上的代碼多少良莠不齊，寫到一半沒了，因此只要本身寫篇博客，記錄下實現過程。css

1、準備工做：html

1.這次樹形是用vue實現的，電腦需提早配置好node.js和vue.js，具體怎麼配置，這裏不做說明。vue

1）若是不記得本身有沒有安裝，能夠win+R調出運行窗口，輸入cmd，按enternode

2)輸入node -v和vue -V（注意vue中的-V是大寫的）webpack

node -vgit

vue -Vgithub

若是顯示了版本號，則意爲已安裝。web

2.引用奧森圖標，進入官網下載包vue-router

3.須要對vue和webpack有基本的瞭解vue-cli

一切準備就緒後，那麼咱們就開始吧

2、安裝

1.首先在本地建立一個文件夾，命名爲vue-tree，進入命令行窗口，而後進入到vue-tree文件夾所在位置

2.安裝vue-cli，用cnpm更快

npm i -g vue-cli

而後建立一個webpack項目而且下載依賴

vue init webpack vue-tutorial

進入到vue-tutorial文件夾裏，cd vue-tutorial

npm i

而後

npm run dev

這時咱們就能夠在localhost:8080中查看咱們的應用了。

3、代碼展現

下面進入重點啦~

1.打開你的main.js文件

而後在src/components文件夾下新建2個vue文件，同時新建一個common文件夾，在裏面新增一個vue文件，具體看圖（這裏的font-aswesome是我下載的一個壓縮包），layout負責佈局展現，index負責樹形展現，treeMenu負責渲染。

咱們先配置好main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from './components/layout.vue'
import IndexPages from './common/index.vue'
import myTree from './components/treeMenu.vue'
Vue.use(VueRouter)
let router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            component: IndexPages
        }
    ]
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<Layout/>',
  components: { Layout }
})

2.打開layout.vue文件，開始編寫（這段樣式用的慕課一位講師的）。其餘的組件將在<router-view></router-view>中被渲染出來。

/**
 * 頁面的入口，負責頁面的佈局
 */

<template>
  <div>
    <div class="app-head">
      <div class="app-head-inner">
        <img src="../assets/logo.png">
         <div class="head-nav">
          <ul class="nav-list">
            <li>登陸</li>
            <li class="nav-pile">|</li>
            <li>註冊</li>
            <li class="nav-pile">|</li>
            <li>關於</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container">
      <router-view></router-view>
    </div>

    <div class="app-foot">
      <p>© 2017 cindy</p>
    </div>
  </div>
</template>

<script>

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}
body {
  background: #f0f2f5;
  font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  font-size: 14px;
  color: #444;
}
.app-head {
  background: #363636;
  color: #b2b2b2;
  height: 90px;
  line-height: 90px;
  width: 100%;
}
.app-head-inner {
  width: 1200px;
  margin: 0 auto;
}
.app-head-inner img {
  width: 50px;
  margin-top: 20px;
}
.head-nav {
  float: right;
}
.head-nav ul {
  overflow: hidden;
}
.head-nav li {
  cursor: pointer;
  float: left;
}
.nav-pile {
  padding: 0 10px;
}
.app-foot {
  text-align: center;
  height: 80px;
  width: 100%;
  line-height: 80px;
  background: #e3e4e8;
  clear: both;
  margin-top: 30px;
}
.container {
  width: 1200px;
  height: 470px;
  margin: 0 auto;
}
ul li {
  padding-left: 10px;
}

</style>

3.打開index.vue文件，代碼以下，樹形主要在<ul v-for="menuItem in theModel"> <myTree class="item" :model="menuItem"></myTree> </ul>實現。

/**
 * 樹形和echarts的展現
 */
<template>
  <div class="index-wrap">
    <div class="index-left">
      <div class="index-left-block">
        <h2>樹形側邊導航欄</h2>
        <ul v-for="menuItem in theModel">
          <myTree class="item" :model="menuItem"></myTree>
        </ul>
      </div>
    </div>
    <div class="index-right">
      <div class="index-right-block">
      </div>
    </div>
  </div>
</template>

<script>
import myTree from '../components/treeMenu.vue'var myData =[{
  'id': '1',
  'menuName': 'echarts',
  'menuCode': '10',
  'children': [
  {
    'menuName': '地圖',
    'menuCode': '11',
  },
  {
    'menuName': '柱狀圖',
    'menuCode': '12',
    'children': [
    {
      'menuName': '交錯正負軸標籤',
      'menuCode': '121'
    },
    {
      'menuName': '柱狀圖框選 ',
      'menuCode': '122'
    },
    {
      'menuName': '堆疊柱狀圖',
      'menuCode': '124'
    }]
  },
  {
    'menuName': '條形圖',
    'menuCode': '13'
  }]
},
{
  'id': '2',
  'menuName': '樹形結構',
  'menuCode': '21'
},
{
  'id': '3',
  'menuName': 'gird分頁',
  'menuCode': '30'
            }]

export default {
  name: 'items',
  props: ['model'],
  components: {
    myTree
  },
  data () {
    return {
      theModel: myData
    }
  }
}
</script>

<style scoped>
.index-wrap {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.index-left {
  float: left;
  width: 300px;
  text-align: left;
}
.index-right {
  float: left;
  width: 900px;
}
.index-left-block, .index-right-block{
  height: 450px;
  margin: 15px;
  background: #fff;
  box-shadow: 0 0 1px #ddd;
}

.index-left-block h2,.index-right-block h2 {
  background: #4fc08d;
  color: #fff;
  padding: 20px 20px;
  font-size: 1.5em;
}

.item {
  cursor: pointer;
}
ul{
  line-height: 40px;
  list-style-type: dot;
}

li div:active,li div:hover {
  background: #9FDABE;
  color: #eee;
}

ul li:hover {
  background: #A6C2B0;
}

</style>

4.最重要的一個文件：treeMenu.vue。這個文件裏有用到font-awesome，須要你們自行去官網下載。而後將壓縮包解壓後，放到src的下面。我將文件夾重名爲「font-awesome」，而後在<script></script>標籤裏引用import '../font-awesome/css/font-awesome.min.css'。

/**
 * 樹的組件，主要功能在這裏實現
 * 
 */
<template>
  
  <li>
    <div @click="toggle" @dblclick="changeType">
      <!-- isFolder判斷是否存在子級改變圖標 -->
      <i v-if="isFolder"uk-animation-="" class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i>
　　　　　
      <i v-if="!isFolder" class="fa fa-file-image-o"></i>
      {{ model.menuName }}
      <i v-if="isFolder" class="fa " :class="[open ? 'fa-chevron-down' : 'fa-chevron-right']" style="display: inline-block;float: right;padding:13px 20px 0 0;"></i>
　　　　　
      
    </div>

    <ul v-show="open" v-if="isFolder">
      <tree-menu v-for="item in model.children" :model="item"></tree-menu>
      <li class="add" @click="addChild">
        <i class="fa fa-plus-square-o" style="padding-left: 20px;">
          <i style="display: inline-block;padding-left: 20px;">add</i>
        </i>
      </li>
    </ul>
  </li>
</template>

<script>
import '../font-awesome/css/font-awesome.min.css'
import Vue from 'vue'
export default {
  name: 'treeMenu',
  props: ['model'],
  data() {
    return {
      open: false,
    }
  },
  computed: {
   isFolder:function() {
     return this.model.children && this.model.children.length
   }
  },
  methods: {
　　toggle: function() {
      if(this.isFolder) {
        this.open = !this.open
      }
　  },
    changeType: function() {
      if(!this.isFolder) {
        Vue.set(this.model,'children',[])
        this.addChild()
        this.open = true
      }
    },
    addChild: function() {
      this.model.children.push({
        name:'new stuff'
      })
    }
  }
}
</script>

<style scoped>

ul {
  line-height: 40px;
  list-style-type: dot;
}
li div:active,li div:hover {
  background: #9FDABE;
  color: #eee;
}

ul li:hover {
  background: #A6C2B0;
}


.fa-folder-open, .fa-folder, .fa-file-image-o {

  padding:0 20px;
}



</style>