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">STARTa>
    <ul>
        
        <li>
            <a href="#">Aa>
            
            <ul>
                <li><a href="#">A-1a>li>
                <li><a href="#">A-2a>li>
                <li><a href="#">A-3a>li>
                <li><a href="#">A-4a>li>
                <li><a href="#">A-5a>li>
            ul>
        li>
        <li>
            <a href="#">Ba>
            <ul>
                <li><a href="#">B-1a>li>
                <li><a href="#">B-2a>li>
                <li><a href="#">B-3a>li>
                <li><a href="#">B-4a>li>
                <li><a href="#">B-5a>li>
            ul>
        li>
    ul>
  div>
template>

html

css

四、第二步

　　做环绕效果。

<template>
  <div class="wrapper">
    <a href="#" class="">STARTa>
    <ul>
      
      <li>
        <a href="#" class="selected">Aa>
        
        <ul>
          <li>
            <a href="#">A-1a>
          li>
          <li>
            <a href="#">A-2a>
          li>
          <li>
            <a href="#">A-3a>
          li>
          <li>
            <a href="#">A-4a>
          li>
          <li>
            <a href="#">A-5a>
          li>
        ul>
      li>
      <li>
        <a href="#">Ba>
        <ul>
          <li>
            <a href="#">B-1a>
          li>
          <li>
            <a href="#">B-2a>
          li>
          <li>
            <a href="#">B-3a>
          li>
          <li>
            <a href="#">B-4a>
          li>
          <li>
            <a href="#">B-5a>
          li>
        ul>
      li>
    ul>
  div>
template>

html

css

　

五、第三步

　　加动画，以及实现级联。　　

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

html

script

css

六、第四步

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

<template>
  <div class="wrapper">
    <a href="#" class="show" @click="Bubblings($event)">STARTa>
    <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>

七、总结

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

 

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

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