用Vue写一个简单好看的菜单组件（Vue实战系列）

在前端开发中，Vue.js已经成为一个非常流行的框架，它以其简洁的语法和强大的功能吸引了大量的开发者。今天，我们将一起使用Vue.js来创建一个简单而美观的菜单组件。

一、准备工作

在开始之前，请确保你已经安装了Vue.js。你可以通过Vue CLI来创建一个新的Vue项目，或者在你的现有项目中引入Vue.js。

需求

1. 实现一个左边栏菜单，菜单只包括两层；
2. 点击出现水波纹效果；
3. 激活效果：有一个绿球小点，标识激活的菜单，顶层菜单被激活时左边出现浅色激活标志；

二、实现

1. 新建一个菜单组件whrmenu

组件接收的参数
我们希望可以定制小球的颜色，菜单数据，父级菜单激活的侧边框颜色

	props: {
   
   
    //菜单数据必输是数组 包含 url title icon children
	    menu: {
   
   
	      type: Array,
	      required: true,
	    },
	    //父级激活左边阴影颜色
	    pletcolor: {
   
   
	      type: String,
	      default: "#856ab5",
	    },
	    //小球颜色
	    pointcolor: {
   
   
	      type: String,
	      default: "#1ab3a3",
	    },

  },

这个菜单长这个样子，菜单的数据：

	menu: [
        {
   
   
          title: "题库管理",
          url: "/index/questionlist",
          icon: "el-icon-files",
          children: [
            {
   
   
              title: "题库列表",
              url: "/index/question/questionlist",
            },
          ],
        },
        {
   
   
          title: "活动管理",
          url: "/index/activity",
          icon: "el-icon-help",