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

我不是女神ヾ 2023-06-03 05:51 102阅读 0赞

> **参考地址：[https://www.html5tricks.com/html5-css3-circle-menu.html][https_www.html5tricks.com_html5-css3-circle-menu.html]**
> 
> **Github地址：[https://github.com/ElsonJe/Simple-ui.git][https_github.com_ElsonJe_Simple-ui.git]**

**一、效果**

![1459138-20190909195942583-1993531465.gif][]

**二、参考**

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

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

**三、第一步**

首先构建一个样子出来。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<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

![1459138-20190909215554477-1950734519.png][]

**四、第二步**

做环绕效果。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<template>
      <div class="wrapper">
        <a href="#" class="">START</a>
        <ul>
          
          <li>
            <a href="#" class="selected">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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<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可以让他显示*/
    }
    /*对所有的li标签加动画效果*/
    .wrapper li {
          
      -webkit-transform: translate3d(0, 0, 0); /*调用GPU提升动画性能*/
      transform: translate3d(0, 0, 0);
      transition: all 1s ease;
      /*下面的方法好像也可以提升性能，具体并没有比较*/
      /* backface-visibility: hidden;
        perspective: 1000; */
    }
    /*设置选中样式*/
    .selected {
          
      background: rgba(51, 51, 51, 0.9);
      display: flex;
      /*调整中心圆形的位置*/
      top: calc(50% - 50px);
      left: calc(50% - 60px);
      color: #f1f1f1;
      animation: light 1s infinite;
    }
    /*让当前选中的子集列表显示*/
    .selected + ul > li > a {
        /*让当前选中的子选项显示，因为默认是 display:none*/
        display: flex;
    }
    /*设置 li 的位置，rotate是顺/逆时针旋转，translateX是沿x轴平移*/
    .selected + ul > li:nth-child(1) {
          
        -webkit-transform: rotate(-120deg) translateX(80px);
        transform: rotate(-120deg) translateX(80px);
    }
    /*设置a标签内字体的位置，应为容器旋转后，字体倾斜了，需要调整回来*/
    /*这里有一个小技巧：字体的旋转角度正好和外部容器的旋转角度相反，但是最后一个的位置需要调整*/
     .selected + ul > li:nth-child(1) > a {
          
        -webkit-transform: rotate(120deg);
        transform: rotate(120deg);
    }
    
     .selected + ul > li:nth-child(2) {
          
        -webkit-transform: rotate(-40deg) translateX(80px);
        transform: rotate(-40deg) translateX(80px);
    }
     .selected + ul > li:nth-child(2) > a {
          
        -webkit-transform: rotate(40deg);
        transform: rotate(40deg);
    }
    
     .selected + ul > li:nth-child(3) {
          
        -webkit-transform: rotate(40deg) translateX(80px);
        transform: rotate(40deg) translateX(80px);
    }
     .selected + ul > li:nth-child(3) > a {
          
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg);
    }
    
     .selected + ul > li:nth-child(4) {
          
        -webkit-transform: rotate(120deg) translateX(120px);
        transform: rotate(120deg) translateX(120px);
    }
     .selected + ul > li:nth-child(4) > a {
          
        -webkit-transform: rotate(-120deg);
        transform: rotate(-120deg);
    }
     .selected + ul > li:nth-child(5) {
          
        -webkit-transform: rotate(180deg) translateX(120px);
        transform: rotate(180deg) translateX(120px);
    }
     .selected + ul > li:nth-child(5) > a {
          
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    </style>

css

![1459138-20190909221310472-959576733.png][]

**五、第三步**

加动画，以及实现级联。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<template>
      <div class="wrapper">
        <a href="#" class="show" @click="Bubblings($event)">START</a>
        <ul>
          
          <li>
            <a href="#" @click="Bubblings($event)">A</a>
            
            <ul>
              <li>
                <a href="#" @click="Bubblings($event)">A-1</a>
              </li>
              <li>
                <a href="#" @click="Bubblings($event)">A-2</a>
              </li>
              <li>
                <a href="#" @click="Bubblings($event)">A-3</a>
              </li>
              <li>
                <a href="#" @click="Bubblings($event)">A-4</a>
              </li>
              <li>
                <a href="#" @click="Bubblings($event)">A-5</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" @click="Bubblings($event)">B</a>
            <ul>
              <li>
                <a href="#" @click="Bubblings($event)">B-1</a>
              </li>
              <li>
                <a href="#" @click="Bubblings($event)">B-2</a>
              </li>
              <li>
                <a href="#" @click="Bubblings($event)">B-3</a>
              </li>
              <li>
                <a href="#" @click="Bubblings($event)">B-4</a>
              </li>
              <li>
                <a href="#" @click="Bubblings($event)">B-5</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </template>

html

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<script>
    export default {
        name:'bubbling',
        methods:{
            Bubblings(e){
                //获取点击的DOM对象
                let self = e.target
                //检查点击的是否是选中的圆
                if (self.classList.contains('selected')) {
                    //如果是移除当前选中效果，返回上级菜单
                    self.classList.remove('selected')
                    //判断它的父级元素是不是顶级元素
                    if (!self.parentNode.classList.contains('wrapper')) {
                        //如果不是顶级元素，展示对应的菜单列表
                        self.parentNode.parentNode.parentNode
                            .querySelector('a')
                            .classList.add('selected')
                    } else {
                        //如果是顶级元素，仅显示最顶级元素
                        self.classList.add('show')
                    }
                } else {
                    //如果点击的不是选中的圆
                    self.classList.add('selected')
                    //判断是否点击的是顶级元素
                    if (!self.parentNode.classList.contains('wrapper')) {
                        //如果不是顶级元素，展开所点击的菜单列表
                        // a(self) -> li(parent) -> ul(parent) -> li(parent) -> a(target)
                        self.parentNode.parentNode.parentNode
                            .querySelector('a')
                            .classList.remove('selected')
                    } else {
                        //点击顶级元素展开一级菜单列表
                        self.classList.remove('show')
                    }
                }
                return false
            }
        }
    }
    </script>

script

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<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可以让他显示*/
    }
    /*对所有的li标签加动画效果*/
    .wrapper li {
          
      -webkit-transform: translate3d(0, 0, 0); /*调用GPU提升动画性能*/
      transform: translate3d(0, 0, 0);
      transition: all 1s ease;
      /*下面的方法好像也可以提升性能，具体并没有比较*/
      /* backface-visibility: hidden;
        perspective: 1000; */
    }
    /*设置选中样式*/
    .selected {
          
      background: rgba(51, 51, 51, 0.9);
      display: flex;
      /*调整中心圆形的位置*/
      top: calc(50% - 50px);
      left: calc(50% - 60px);
      color: #f1f1f1;
      animation: light 1s infinite;
    }
    /*让当前选中的子集列表显示*/
    .selected + ul > li > a {
      /*让当前选中的子选项显示，因为默认是 display:none*/
      display: flex;
    }
    /*设置 li 的位置，rotate是顺/逆时针旋转，translateX是沿x轴平移*/
    .selected + ul > li:nth-child(1) {
          
      -webkit-transform: rotate(-120deg) translateX(80px);
      transform: rotate(-120deg) translateX(80px);
    }
    /*设置a标签内字体的位置，应为容器旋转后，字体倾斜了，需要调整回来*/
    /*这里有一个小技巧：字体的旋转角度正好和外部容器的旋转角度相反，但是最后一个的位置需要调整*/
    .selected + ul > li:nth-child(1) > a {
          
      -webkit-transform: rotate(120deg);
      transform: rotate(120deg);
    }
    
    .selected + ul > li:nth-child(2) {
          
      -webkit-transform: rotate(-40deg) translateX(80px);
      transform: rotate(-40deg) translateX(80px);
    }
    .selected + ul > li:nth-child(2) > a {
          
      -webkit-transform: rotate(40deg);
      transform: rotate(40deg);
    }
    
    .selected + ul > li:nth-child(3) {
          
      -webkit-transform: rotate(40deg) translateX(80px);
      transform: rotate(40deg) translateX(80px);
    }
    .selected + ul > li:nth-child(3) > a {
          
      -webkit-transform: rotate(-40deg);
      transform: rotate(-40deg);
    }
    
    .selected + ul > li:nth-child(4) {
          
      -webkit-transform: rotate(120deg) translateX(120px);
      transform: rotate(120deg) translateX(120px);
    }
    .selected + ul > li:nth-child(4) > a {
          
      -webkit-transform: rotate(-120deg);
      transform: rotate(-120deg);
    }
    .selected + ul > li:nth-child(5) {
          
      -webkit-transform: rotate(180deg) translateX(120px);
      transform: rotate(180deg) translateX(120px);
    }
    .selected + ul > li:nth-child(5) > a {
          
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
    </style>

css

**六、第四步**

绑定数据，以及完整代码。

<template>
      <div class="wrapper">
        <a href="#" class="show" @click="Bubblings($event)">START</a>
        <ul>
          
          <li v-for="(item,index) of list" :key="index">
            <a href="#" @click="Bubblings($event)">{
         { item.name }}</a>
            
            <ul>
              <li v-for="(child,index) of item.childs" :key="index">
                <a href="#" @click="Bubblings($event)">{
         { child.name }}</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </template>

<script>
    export default {
        name:'bubbling',
        data(){
            return {
                list:[
                    {
                        name:'A',
                        childs:[
                            {
                                name:'A-1'
                            },
                            {
                                name:'A-2'
                            },
                            {
                                name:'A-3'
                            }
                        ]
                    },
                    {
                        name:'B',
                        childs:[
                            {
                                name:'B-1'
                            },
                            {
                                name:'B-2'
                            },
                            {
                                name:'B-3'
                            }
                        ]
                    }
                ]
            }
        },
        methods:{
            Bubblings(e){
                //获取点击的DOM对象
                let self = e.target
                //检查点击的是否是选中的圆
                if (self.classList.contains('selected')) {
                    //如果是移除当前选中效果，返回上级菜单
                    self.classList.remove('selected')
                    //判断它的父级元素是不是顶级元素
                    if (!self.parentNode.classList.contains('wrapper')) {
                        //如果不是顶级元素，展示对应的菜单列表
                        self.parentNode.parentNode.parentNode
                            .querySelector('a')
                            .classList.add('selected')
                    } else {
                        //如果是顶级元素，仅显示最顶级元素
                        self.classList.add('show')
                    }
                } else {
                    //如果点击的不是选中的圆
                    self.classList.add('selected')
                    //判断是否点击的是顶级元素
                    if (!self.parentNode.classList.contains('wrapper')) {
                        //如果不是顶级元素，展开所点击的菜单列表
                        // a(self) -> li(parent) -> ul(parent) -> li(parent) -> a(target)
                        self.parentNode.parentNode.parentNode
                            .querySelector('a')
                            .classList.remove('selected')
                    } else {
                        //点击顶级元素展开一级菜单列表
                        self.classList.remove('show')
                    }
                }
                return false
            }
        }
    }
    </script>

<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可以让他显示*/
    }
    /*对所有的li标签加动画效果*/
    .wrapper li {
         
      -webkit-transform: translate3d(0, 0, 0); /*调用GPU提升动画性能*/
      transform: translate3d(0, 0, 0);
      transition: all 1s ease;
      /*下面的方法好像也可以提升性能，具体并没有比较*/
      /* backface-visibility: hidden;
        perspective: 1000; */
    }
    /*设置选中样式*/
    .selected {
         
      background: rgba(51, 51, 51, 0.9);
      display: flex;
      /*调整中心圆形的位置*/
      top: calc(50% - 50px);
      left: calc(50% - 60px);
      color: #f1f1f1;
      animation: light 1s infinite;
    }
    /*让当前选中的子集列表显示*/
    .selected + ul > li > a {
      /*让当前选中的子选项显示，因为默认是 display:none*/
      display: flex;
    }
    /*设置 li 的位置，rotate是顺/逆时针旋转，translateX是沿x轴平移*/
    .selected + ul > li:nth-child(1) {
         
      -webkit-transform: rotate(-120deg) translateX(80px);
      transform: rotate(-120deg) translateX(80px);
    }
    /*设置a标签内字体的位置，应为容器旋转后，字体倾斜了，需要调整回来*/
    /*这里有一个小技巧：字体的旋转角度正好和外部容器的旋转角度相反，但是最后一个的位置需要调整*/
    .selected + ul > li:nth-child(1) > a {
         
      -webkit-transform: rotate(120deg);
      transform: rotate(120deg);
    }
    
    .selected + ul > li:nth-child(2) {
         
      -webkit-transform: rotate(-40deg) translateX(80px);
      transform: rotate(-40deg) translateX(80px);
    }
    .selected + ul > li:nth-child(2) > a {
         
      -webkit-transform: rotate(40deg);
      transform: rotate(40deg);
    }
    
    .selected + ul > li:nth-child(3) {
         
      -webkit-transform: rotate(40deg) translateX(80px);
      transform: rotate(40deg) translateX(80px);
    }
    .selected + ul > li:nth-child(3) > a {
         
      -webkit-transform: rotate(-40deg);
      transform: rotate(-40deg);
    }
    
    .selected + ul > li:nth-child(4) {
         
      -webkit-transform: rotate(120deg) translateX(120px);
      transform: rotate(120deg) translateX(120px);
    }
    .selected + ul > li:nth-child(4) > a {
         
      -webkit-transform: rotate(-120deg);
      transform: rotate(-120deg);
    }
    .selected + ul > li:nth-child(5) {
         
      -webkit-transform: rotate(180deg) translateX(120px);
      transform: rotate(180deg) translateX(120px);
    }
    .selected + ul > li:nth-child(5) > a {
         
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
    </style>

**七、总结**

**更多的是对CSS动画的操作，以及DOM的结构和布局。欢迎留言讨论。**

> **`谦良恭卑，信诚实至；``生活不易，共勉同求。`**

转载于:https://www.cnblogs.com/elsonww/p/11494763.html

[https_www.html5tricks.com_html5-css3-circle-menu.html]: https://www.html5tricks.com/html5-css3-circle-menu.html
[https_github.com_ElsonJe_Simple-ui.git]: https://github.com/ElsonJe/Simple-ui.git
[1459138-20190909195942583-1993531465.gif]: /images/20230601/29ef514c866c4391928fac55f112edfa.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20230601/225f36bec71148d7b397f57e965c0bd3.png
[1459138-20190909215554477-1950734519.png]: /images/20230601/6fc59539da31446d96058ca3caf38c21.png
[1459138-20190909221310472-959576733.png]: /images/20230601/a4b92501dc9c4471b3b98cb95b548a32.png

发表评论取消回复

表情：

评论列表（有 0 条评论，102人围观）

还没有评论，来说两句吧...

相关阅读

相关 android 高仿圆形菜单

看见一个人写了一个圆形的可以转的菜单，当时看的还是挺模糊的，最后自己模仿的写了一遍，这是源代码基本思想是这样的 1，把每个图标显示的什么图标确定下来 2，计算每一个点的

电玩女神/ 2023年10月18日 20:13/ 0 赞/ 139 阅读

相关 Vue结合ElementUI封装菜单管理

前言本文将介绍如何使用Vue和ElementUI开发一个简单的菜单管理系统。菜单管理系统可以让用户方便地添加、修改和删除菜单，是很多网站和应用程序的基础管理功能之一。

男娘i/ 2023年09月24日 22:58/ 0 赞/ 138 阅读

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

> 参考地址：[https://www.html5tricks.com/html5-css3-circle-menu.html][https_www.html5tricks.c

我不是女神ヾ/ 2023年06月03日 05:51/ 0 赞/ 103 阅读

相关 Vue 递归组件(构建树形菜单)

对于一些有规律的DOM结构，如果我们再一遍遍的编写同样的代码，显然代码是比较繁琐和不科学的，而且自己的工作量会大大增加，那么有没有一种方法来解决这个问题呢？答案是肯定的

阳光穿透心脏的1/2处/ 2023年01月02日 06:25/ 0 赞/ 310 阅读

相关圆形图标菜单

背景：实现圆形图标菜单，中间一个大圆圈，周围是小圆圈先上效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_

￡神魔★判官ぃ/ 2022年10月18日 00:52/ 0 赞/ 246 阅读

相关 jQuery圆形菜单旋转切换插件

[下载地址][Link 1]jQuery圆形菜单旋转切换插件是一款jQuery基于CSS3属性制作的圆形图标菜单轮播切换效果。 ![1631277723.png][] dd

偏执的太偏执、/ 2022年09月11日 02:29/ 0 赞/ 251 阅读

相关 SASS实现圆形动画菜单

好的，SASS实现的圆形动画菜单，效果和主要原理如下图所示。 ![SouthEast][] [在线研究][Link 1]点这里，[下载收藏][Link 2]点这里。

﹏ヽ暗。殇╰゛Y/ 2022年08月26日 01:18/ 0 赞/ 259 阅读

相关 vue+elementUI多级菜单动态渲染组件

以下是组件代码： \[HTML\] [查看纯][Link 1] [字幕：][Link 1] 1. < template > 2. < div

逃离我推掉我的手/ 2022年05月24日 06:51/ 0 赞/ 500 阅读

相关 Vue封装树形菜单组件

csdn终于更新完成了哈，ok，步入正题像这种树形结构的核心思想就是：递归思想，知道使用递归，其实这个例子函数的封装也就很简单喽实现步骤：

╰半橙微兮°/ 2022年05月20日 09:24/ 0 赞/ 440 阅读

相关 Vue.js--下拉菜单组件

效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

冷不防/ 2021年08月13日 18:35/ 0 赞/ 500 阅读