色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue elmenu

錢良釵1年前10瀏覽0評論

Vue的ElMenu是一款非常實用的菜單組件。它使用簡單方便,支持多級菜單和子菜單的展開,可以快速實現一個美觀、實用的菜單。

下面是一個ElMenu的示例代碼,展示了如何通過Vue實現一個基本的二級菜單:

<template>
<el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>導航一</span>
</template>
<el-menu-item-group title="分組一">
<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="分組二">
<el-menu-item index="1-3">選項3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">
<i class="el-icon-menu"></i>
<span>選項4</span>
</template>
<el-menu-item index="1-4-1">選項4-1</el-menu-item>
<el-menu-item index="1-4-2">選項4-2</el-menu-item>
<el-menu-item index="1-4-3">選項4-3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">導航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-menu"></i>
<span slot="title">導航三</span>
</el-menu-item>
</el-menu>
</template>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>

在這個示例中,我們通過設置default-active來指定默認選中的菜單項。通過el-menu-itemel-submenu標簽來生成菜單項和子菜單。菜單項和子菜單都需要設置index屬性,這個屬性可以在菜單項被選中時傳遞給事件處理器,用于標識選中的菜單項是哪一個。

除了default-active屬性之外,還有很多其他的屬性可以設置,例如unique-openedcollapserouter等,請參考官方文檔了解更多。

總之,Vue的ElMenu組件是一個非常實用的菜單組件,可以幫助我們輕松構建一個美觀、易用的菜單。