基于Vue的vue-circle-menu 实现菜单代码
时间: 2023-12-24 11:05:27 浏览: 43
Vue-Circle-Menu 是一个基于 Vue.js 的圆形菜单组件。以下是一个简单的实现示例:
```
<template>
<div class="circle-menu">
<vue-circle-menu :items="menuItems" @item-click="handleMenuClick"></vue-circle-menu>
</div>
</template>
<script>
import VueCircleMenu from 'vue-circle-menu';
export default {
components: {
VueCircleMenu,
},
data() {
return {
menuItems: [
{ icon: 'mdi-home', text: 'Home' },
{ icon: 'mdi-account', text: 'Profile' },
{ icon: 'mdi-settings', text: 'Settings' },
{ icon: 'mdi-logout', text: 'Logout' },
],
};
},
methods: {
handleMenuClick(item) {
console.log(item.text + ' clicked');
// 在这里可以根据不同的菜单项进行不同的操作
},
},
};
</script>
<style>
.circle-menu {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
```
在上面的示例中,我们首先引入了 VueCircleMenu 组件,然后在组件中定义了一个 menuItems 数组,其中包含了四个菜单项,每个菜单项包括了一个图标和一个文本。
接着,我们在模板中使用 VueCircleMenu 组件,并将 menuItems 作为 props 传递给组件。同时,我们监听了组件的 item-click 事件,当用户点击菜单项时,会触发 handleMenuClick 方法。
在 handleMenuClick 方法中,我们可以根据传递过来的菜单项 item 进行不同的操作,比如跳转到对应的页面或执行某个函数等。
最后,我们还定义了一些样式,使圆形菜单居中显示在页面中央。