Vue rotating menu

by p_russell

HTML

<template>
	<div class="quick-menu" ref="quickMenu" :style="quickMenuStyle">
    <div v-for="(n,key) in menuCount" class="sub-menu" :style="getSubMenu(n-1)">
        <router-link v-if="menuUrlList[n-1].isLink" :to="menuUrlList[n-1].url" :target="openNewTab" :style="subMenuStyle" @mouseover.stop="mouseEnterSubMenu" @mouseout.stop="mouseOutSubMenu">
          <i :class="iconClass[n-1]" ref="icon"></i>
        </router-link>
        <a v-else :style="subMenuStyle" @mouseover.stop="mouseEnterSubMenu" @mouseout.stop="mouseOutSubMenu" @click="processCallback(key)">
          <i :class="iconClass[n-1]" ref="icon"></i>
        </a>

      </div>

      <div class='menu' :style="menuStyle">
        <div class='core-menu' @click="toggleMenu">
          <div class='bar'></div>
        </div>
      </div>
    </div>
</template>

CSS

.menu-animate {
  -webkit-animation: bounce 1s linear 1s;
  -moz-animation: bounce 1s linear 1s;
  animation: bounce 1s linear 1s;
}

.quick-menu {
  color: #fff;
  position: fixed;
  width: 60px;
  height: 60px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  right: 30px;
  > .menu {
    display: block;
    position: absolute;
    border-radius: 50% !important;
    width: 60px;
    height: 60px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
    color: #fff;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    .core-menu {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 60px;
      height: 60px;
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      transition: all 1s ease;
      .bar {
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        transition: all 1s ease;
        width: 28px;
        height: 3px;
        background: #fff;
        position: absolute;
        top: 35%;
        margin-top: -1.5px;
        left: 16px;
        -webkit-transform-origin: 0% 50%;
        -moz-transform-origin: 0% 50%;
        -ms-transform-origin: 0% 50%;
        -o-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
        &:before ,&:after{
          -webkit-transition: all 1s ease;
          -moz-transition: all 1s ease;
          transition: all 1s ease;
          content: '';
          width: 28px;
          height: 3px;
          background: #fff;
          position: absolute;
          left: 0px;
          -webkit-transform-origin: 0% 50%;
          -moz-transform-origin: 0% 50%;
         ...

Vue

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})





export default {
  ...
  components: {
    quickMenu
  },
  ...
}




	export default{
name:'quickMenu',
  props:{
    menuCount:{
      type: Number,
      required: true,
      default:4
    },
    iconClass:{
      type:Array,
      required: true
    },
    menuUrlList:{
      type:Array,
      required: true
    },
    backgroundColor:{
      type:String,
      default:'#20babb'
    },
    color:{
      type:String,
      default:'#fff'
    },
    isOpenNewTab:{
      type:Boolean,
      default:false
    },
    position:{
      type:String,
      default:'top-left'
    }
  },
  computed:{
    openNewTab(){
      return this.isOpenNewTab?'_blank':'_self'
    },
    quickMenuStyle(){
      const topPosition = {top:'30px'}, 
      bottomPosition={bottom:'30px'},
      leftPosition = {left:'30px'},
      rightPosition = {right:'30px'}

      let style = this.isTop?topPosition:bottomPosition
      Object.assign(style, this.isLeft?leftPosition:rightPosition)
      Object.assign(style,{transform: this.isLeft?"rotate(-180deg)":"rotate(180deg)"})
      return style
    },
    menuStyle(){
      return {
        backgroundColor: this.backgroundColor,
        color: this.color
      }
    },
    subMenuStyle(){
      const style = {
        backgroundColor: this.backgroundColor,
        color: this.color
      }
      return style
    },
   
    isTop(){
      return !!~this.position.toLowerCase().indexOf('top')
    },
    isLeft(){
      return !!~this.position.toLowerCase().indexOf('left')
    }
  },
  data(){
    return{
      menuSize:60,
     ...