欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Element NavMenu導(dǎo)航菜單的使用方法

 更新時間：2020年07月27日 08:30:16   作者：ForeverJPB.  
這篇文章主要介紹了Element NavMenu導(dǎo)航菜單的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

組件—導(dǎo)航菜單

頂欄

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
 <el-menu-item index="1">處理中心</el-menu-item>
 <el-submenu index="2">
  <template slot="title">我的工作臺</template>
  <el-menu-item index="2-1">選項1</el-menu-item>
  <el-menu-item index="2-2">選項2</el-menu-item>
  <el-menu-item index="2-3">選項3</el-menu-item>
  <el-submenu index="2-4">
   <template slot="title">選項4</template>
   <el-menu-item index="2-4-1">選項1</el-menu-item>
   <el-menu-item index="2-4-2">選項2</el-menu-item>
   <el-menu-item index="2-4-3">選項3</el-menu-item>
  </el-submenu>
 </el-submenu>
 <el-menu-item index="3" disabled>消息中心</el-menu-item>
 <el-menu-item index="4"><a  target="_blank">訂單管理</a></el-menu-item>
</el-menu>
<div class="line"></div>
<el-menu
 :default-active="activeIndex2"
 class="el-menu-demo"
 mode="horizontal"
 @select="handleSelect"
 background-color="#545c64"
 text-color="#fff"
 active-text-color="#ffd04b">
 <el-menu-item index="1">處理中心</el-menu-item>
 <el-submenu index="2">
  <template slot="title">我的工作臺</template>
  <el-menu-item index="2-1">選項1</el-menu-item>
  <el-menu-item index="2-2">選項2</el-menu-item>
  <el-menu-item index="2-3">選項3</el-menu-item>
  <el-submenu index="2-4">
   <template slot="title">選項4</template>
   <el-menu-item index="2-4-1">選項1</el-menu-item>
   <el-menu-item index="2-4-2">選項2</el-menu-item>
   <el-menu-item index="2-4-3">選項3</el-menu-item>
  </el-submenu>
 </el-submenu>
 <el-menu-item index="3" disabled>消息中心</el-menu-item>
 <el-menu-item index="4"><a  target="_blank">訂單管理</a></el-menu-item>
</el-menu>

<script>
 export default {
  data() {
   return {
    activeIndex: '1',
    activeIndex2: '1'
   };
  },
  methods: {
   handleSelect(key, keyPath) {
    console.log(key, keyPath);
   }
  }
 }
</script>

側(cè)欄

<el-row class="tac">
 <el-col :span="12">
  <h5>默認顏色</h5>
  <el-menu
   default-active="2"
   class="el-menu-vertical-demo"
   @open="handleOpen"
   @close="handleClose">
   <el-submenu index="1">
    <template slot="title">
     <i class="el-icon-location"></i>
     <span>導(dǎo)航一</span>
    </template>
    <el-menu-item-group>
     <template slot="title">分組一</template>
     <el-menu-item index="1-1">選項1</el-menu-item>
     <el-menu-item index="1-2">選項2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分組2">
     <el-menu-item index="1-3">選項3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
     <template slot="title">選項4</template>
     <el-menu-item index="1-4-1">選項1</el-menu-item>
    </el-submenu>
   </el-submenu>
   <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">導(dǎo)航二</span>
   </el-menu-item>
   <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">導(dǎo)航三</span>
   </el-menu-item>
   <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">導(dǎo)航四</span>
   </el-menu-item>
  </el-menu>
 </el-col>
 <el-col :span="12">
  <h5>自定義顏色</h5>
  <el-menu
   default-active="2"
   class="el-menu-vertical-demo"
   @open="handleOpen"
   @close="handleClose"
   background-color="#545c64"
   text-color="#fff"
   active-text-color="#ffd04b">
   <el-submenu index="1">
    <template slot="title">
     <i class="el-icon-location"></i>
     <span>導(dǎo)航一</span>
    </template>
    <el-menu-item-group>
     <template slot="title">分組一</template>
     <el-menu-item index="1-1">選項1</el-menu-item>
     <el-menu-item index="1-2">選項2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分組2">
     <el-menu-item index="1-3">選項3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
     <template slot="title">選項4</template>
     <el-menu-item index="1-4-1">選項1</el-menu-item>
    </el-submenu>
   </el-submenu>
   <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">導(dǎo)航二</span>
   </el-menu-item>
   <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">導(dǎo)航三</span>
   </el-menu-item>
   <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">導(dǎo)航四</span>
   </el-menu-item>
  </el-menu>
 </el-col>
</el-row>

<script>
 export default {
  methods: {
   handleOpen(key, keyPath) {
    console.log(key, keyPath);
   },
   handleClose(key, keyPath) {
    console.log(key, keyPath);
   }
  }
 }
</script>

折疊

<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
 <el-radio-button :label="false">展開</el-radio-button>
 <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
 <el-submenu index="1">
  <template slot="title">
   <i class="el-icon-location"></i>
   <span slot="title">導(dǎo)航一</span>
  </template>
  <el-menu-item-group>
   <span slot="title">分組一</span>
   <el-menu-item index="1-1">選項1</el-menu-item>
   <el-menu-item index="1-2">選項2</el-menu-item>
  </el-menu-item-group>
  <el-menu-item-group title="分組2">
   <el-menu-item index="1-3">選項3</el-menu-item>
  </el-menu-item-group>
  <el-submenu index="1-4">
   <span slot="title">選項4</span>
   <el-menu-item index="1-4-1">選項1</el-menu-item>
  </el-submenu>
 </el-submenu>
 <el-menu-item index="2">
  <i class="el-icon-menu"></i>
  <span slot="title">導(dǎo)航二</span>
 </el-menu-item>
 <el-menu-item index="3" disabled>
  <i class="el-icon-document"></i>
  <span slot="title">導(dǎo)航三</span>
 </el-menu-item>
 <el-menu-item index="4">
  <i class="el-icon-setting"></i>
  <span slot="title">導(dǎo)航四</span>
 </el-menu-item>
</el-menu>

<style>
 .el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
 }
</style>

<script>
 export default {
  data() {
   return {
    isCollapse: true
   };
  },
  methods: {
   handleOpen(key, keyPath) {
    console.log(key, keyPath);
   },
   handleClose(key, keyPath) {
    console.log(key, keyPath);
   }
  }
 }
</script>

Menu Attribute


Menu Methods

Menu Events

SubMenu Attribute

Menu-Item Attribute

Menu-Group Attribute

到此這篇關(guān)于Element NavMenu導(dǎo)航菜單的使用方法的文章就介紹到這了,更多相關(guān)Element NavMenu導(dǎo)航菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • ASP.NET實現(xiàn)Hadoop增刪改查的示例代碼

    ASP.NET實現(xiàn)Hadoop增刪改查的示例代碼

    本篇文章主要介紹了ASP.NET實現(xiàn)Hadoop增刪改查的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • 淺談asp.net Forms身份驗證詳解

    淺談asp.net Forms身份驗證詳解

    這篇文章主要介紹了淺談asp.net Forms身份驗證詳解 ，這種方法可以輕松的保持用戶的登錄狀態(tài)（如果用戶想這樣），便捷的用戶授權(quán)配置，增強的安全性，有興趣的可以了解一下。
    2016-12-12
  • gridview實現(xiàn)服務(wù)器端和客戶端全選的兩種方法分享

    gridview實現(xiàn)服務(wù)器端和客戶端全選的兩種方法分享

    這篇文章主要介紹了gridview實現(xiàn)服務(wù)器端和客戶端全選的兩種方法,需要的朋友可以參考下
    2014-02-02
  • 建立自己的RSS

    建立自己的RSS

    建立自己的RSS...
    2006-09-09
  • asp.net?core實體類生產(chǎn)CRUD后臺管理界面

    asp.net?core實體類生產(chǎn)CRUD后臺管理界面

    這篇文章主要為大家介紹了asp.net?core實體類生產(chǎn)CRUD后臺管理界面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-05-05
  • asp.net程序優(yōu)化 盡量減少數(shù)據(jù)庫連接操作

    asp.net程序優(yōu)化 盡量減少數(shù)據(jù)庫連接操作

    最近做一個項目，做的比較郁悶，現(xiàn)在把項目經(jīng)驗總結(jié)在這里。項目的主要功能就是為第三方程序提供數(shù)據(jù)，并根據(jù)客戶端的調(diào)用提供數(shù)據(jù)更新。我的程序?qū)儆诜?wù)端。服務(wù)端以站點形式部署，以Xml的數(shù)據(jù)格式輸出
    2012-05-05
  • 在Linux上使用OpenCvSharp的過程詳解

    在Linux上使用OpenCvSharp的過程詳解

    在本次項目中,我們成功實現(xiàn)了在Linux上使用OpenCvSharp,并成功配置了OpenCvSharp依賴庫,實現(xiàn)了在.NET 6.0環(huán)境下使用C#語言調(diào)用OpenCvSharp庫,實現(xiàn)的圖片數(shù)據(jù)的讀取以及圖像色彩轉(zhuǎn)換,并進行了圖像展示,感興趣的朋友跟隨小編一起看看吧
    2024-02-02
  • Docker結(jié)合.Net Core的初步使用教程

    Docker結(jié)合.Net Core的初步使用教程

    這篇文章主要給大家介紹了關(guān)于Docker結(jié)合.Net Core的初步使用教程，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • ASP.NET 回發(fā)密碼框清空問題處理方法

    ASP.NET 回發(fā)密碼框清空問題處理方法

    這篇文章主要介紹了ASP.NET 回發(fā)密碼框清空問題處理方法,需要的朋友可以參考下
    2014-03-03

最新評論