使用Vue怎么實現(xiàn)彈出菜單功能

這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)使用Vue怎么實現(xiàn)彈出菜單功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

.menu_container {
  position: absolute;
  z-index: 100;
  border-radius: 50%;
  transition-duration: 400ms;
  text-align: center;
  border: #efefef 3px solid;
  box-shadow: aliceblue 1px 1px 1px;
 }

 .menu_item {
  position: absolute;
  border-radius: 50%;
  z-index: 99;
  border: #efefef 3px solid;
  text-align: center;
  box-shadow: aliceblue 1px 1px 1px;
 }

邏輯分析

這里我將這個控件幾個屬性獨立出來，方便下次開發(fā)，其中包含，menu的背景，整個控件在屏幕的哪個角落，menu的寬高，item距離menu位移的距離，menu的背景色，及item的背景色，item的相關(guān)內(nèi)容則由數(shù)據(jù)來控制，具體的我們直接在下方的實現(xiàn)里來講解。

最終實現(xiàn)

這里我用代碼加注釋的方式，幫助大家理解，template我簡單的帶過一下

<div>
  <div class="menu_container" ref="menuHome" @click="toggleMenu">
   <img :src="menuSrc"><!--menu圖-->
  </div>
  <div class="menu_item" v-for="(item,index) in menuItems" :id="item.name" @click="clickMenu(item,index)">
   <img :src="item.src"><!--item圖-->
  </div>
 </div>

核心實現(xiàn) 通過分析可以得出，每個item的偏移量應該為 橫向x:基礎(chǔ)值 * sin(角度值） 縱向y:基礎(chǔ)值 * cos(角度值） 角度值：（數(shù)組的長度-1-當前的下標）* 每一塊所占的角度 * 弧度表示 弧度表示：2 * Math.PI / 360

export default {
  ...
  props: {//開放的屬性，方便自定義
   menuSrc: {
    default: require('../assets/menu.png')
   },
   position: {
    default: 'LT'//可選擇LT、LB、RT、RB4個角落
   },
   width: {
    default: 50,
   },
   baseDistance: {
    default: 150,
   },
   menuBg: {
    default: 'white'
   },
   itemBg: {
    default: 'white'
   },
   menuItems: {
    type: Array,
   }
  },
  data() {
   return {
    openFlag: false,//展開合并標志
    operators: ['+', '+'],//用于記錄展開時動畫XY方向
   }
  },
  mounted() {
   //根據(jù)props初始化各內(nèi)容的各種style
   this.$refs.menuHome.style.width = this.width + 'px';
   this.$refs.menuHome.style.height = this.width + 'px';
   this.$refs.menuHome.style.lineHeight = this.width + 'px';
   this.$refs.menuHome.style.background = this.menuBg;
   this.menuItems.forEach((item) => {
    let el = document.getElementById(item.name);
    el.style.width = `${this.width * 0.8}px`;
    el.style.height = `${this.width * 0.8}px`;
    el.style.lineHeight = `${this.width * 0.8}px`;
    el.style.background = this.itemBg;
   });
   //根據(jù)position，選擇不同的定位
   switch (this.position) {
    case 'LT':
     this.$refs.menuHome.style.left = '20px';
     this.$refs.menuHome.style.top = '20px';
     this.menuItems.forEach((item) => {
      let el = document.getElementById(item.name);
      el.style.left = '26px';
      el.style.top = '26px';

     });
     this.operators = ['+', '+'];
     break;
    ...
   }
  },
  methods: {
   toggleMenu() {
    if (!this.openFlag) {//合并時，點擊展開操作
     this.menuItems.forEach((item, index) => {
      this.toggleMenuTransition(item.name, index, false)
     });
     //menu本身轉(zhuǎn)一周
     this.$refs.menuHome.style.transform = 'rotate(360deg)';
    } else {
     this.menuItems.forEach((item, index) => {
      this.toggleMenuTransition(item.name, index, true)
     });
     //menu恢復
     this.$refs.menuHome.style.transform = 'rotate(0)';
    }
    this.openFlag = !this.openFlag;
   },
   toggleMenuTransition(name, index, revert) {
    let oneArea = 90 / (this.menuItems.length - 1);//每一塊所占的角度
    let axisX = Math.sin((this.menuItems.length - 1 - index) * oneArea * 2 * Math.PI / 360);//橫坐標所偏移的比例
    let axisY = Math.cos((this.menuItems.length - 1 - index) * oneArea * 2 * Math.PI / 360);//縱坐標所便宜的比例
    let el = document.getElementById(name);//若所傳的name一直，會報錯。
    let that = this;
    if (!revert) {
     setTimeout(function () {
      el.style.transitionDuration = '200ms';
      el.style.transform = `translate(${that.operators[0]}${that.baseDistance * axisX}px,${that.operators[1]}${that.baseDistance * axisY }px)`;//進行動畫
     }, index * 100)//通過定時器的方式，達到一個一個彈出來的效果
    } else {
     //item恢復
     el.style.transitionDuration = '200ms';
     el.style.transform = `translate(0,0)`;
    }
   },
   clickMenu(item, index) {
    //暴露方法給父組件，進行點擊事件的操作
    this.$emit('clickMenu', item, index)
   }
  }
 }

再父組件中引入就可以大功告成啦，先跳一會兒吧,燃燒你的卡路里

父組件調(diào)用

引入組件

import toggleMenu from './toggleMenu'

在 components聲明

components: {
   toggleMenu
},

template中使用

menuItems: [//name和src必填，且name唯一否則會報錯
    {name: 'menu1', src: require('../assets/emoji.png')},
    {name: 'menu2', src: require('../assets/cart.png')},
    {name: 'menu3', src: require('../assets/folder.png')},
    {name: 'menu4', src: require('../assets/home.png')},
    {name: 'menu5', src: require('../assets/my.png')},
]
<toggle-menu :menuItems="menuItems"
       @clickMenu="clickMenu"
       ></toggle-menu>

屬性及方法一欄

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

上述就是小編為大家分享的使用Vue怎么實現(xiàn)彈出菜單功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。