vue封装圆形菜单(冒泡菜单)组件

参考地址：https://www.html5tricks.com/html5-css3-circle-menu.html

Github地址：https://github.com/ElsonJe/Simple-ui.git

 

一、效果

 

二、参考

　　上面有一个链接地址，我参考了这个插件的源码，没有做太多的改变，只是修改为了适合我当前的需求，并且把步骤和思路大概整理了一下。

　　因为我本人是个前端小白，对于美仅限于欣赏。

三、第一步

　　首先构建一个样子出来。

<template>
  <div class="wrapper">
    <a href="#" class="show">START</a>
    <ul>
        <!-- 一级列表 -->
        <li>
            <a href="#">A</a>
            <!-- 二级列表 -->
            <ul>
                <li><a href="#">A-1</a></li>
                <li><a href="#">A-2</a></li>
                <li><a href="#">A-3</a></li>
                <li><a href="#">A-4</a></li>
                <li><a href="#">A-5</a></li>
            </ul>
        </li>
        <li>
            <a href="#">B</a>
            <ul>
                <li><a href="#">B-1</a></li>
                <li><a href="#">B-2</a></li>
                <li><a href="#">B-3</a></li>
                <li><a href="#">B-4</a></li>
                <li><a href="#">B-5</a></li>
            </ul>
        </li>
    </ul>
  </div>
</template>

html

<style scoped>
ul{
     
    list-style: none;
}
a {
     
  width: 120px;
  height: 120px;
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 120px;
  display: none; /*默认所有的a都不显示*/
  text-decoration: none;
  color: #333;
  transition: all 1s ease;
  box-shadow: 0 0 15px #222;
  font-family: "segoe ui";
  font-weight: 200;
  font-size: 16px;
}
.wrapper {
     
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}
a.show {
     
  display: flex !important; /*因为开始设置了a标签为none，这里重置display可以让他显示*/
}
</style>

css

四、第二步

　　做环绕效果。

<template>
  <div class="wrapper">
    <a href="#" class="">START</a>
    <ul>
      <!-- 一级列表 -