android-cloud-H5/pages/rtcEngine/components/FunctionMenu.vue

<template>
  <div class="menu-btn-wrap">
    <van-row>
      <!-- 菜单常驻按钮 最多只显示4个 -->
      <div class="menu-btn-fixed">
        <van-col span="6" v-for="(item, index) in funcList.filter((_, i)=>(i < 4))" :key="index">
          <!-- 状态切换按钮 -->
          <template v-if="item.switch">
            <div class="menu-item" @click="funcHandle(item)">
              <!-- 按钮块 -->
              <div class="icon-bg">
                <!-- 图标 -->
                <img width="36" height="36" :src="require(`~/assets/image/rtc/${item.switch[+item.status].icon}.png`)" />
              </div>
              <div class="menu-name">{{ item.switch[+item.status].label }}</div>
            </div>
          </template>

          <!-- 单一状态按钮 -->
          <template v-else>
            <div class="menu-item" @click="funcHandle(item)">
              <!-- 按钮块 -->
              <div class="icon-bg">
                <!-- 图标 -->
                <img width="36" height="36" :src="require(`~/assets/image/rtc/${item.icon}.png`)" />
              </div>
              <div class="menu-name">{{ item.label }}</div>
            </div>
          </template>
        </van-col>
      </div>

      <!-- 菜单抽屉内按钮 -->
      <div class="menu-drawer-warp" v-show="functionMenuVisible">
        <!-- 项 -->
        <van-col span="6" v-for="(item, index) in funcList.filter((_, i)=>(i > 3))" :key="index">
          <div class="menu-item" @click="funcHandle(item)">
            <div class="icon-bg">
              <img width="36" height="36" :src="require(`~/assets/image/rtc/${item.icon}.png`)" />
            </div>
            <div class="menu-name">{{ item.label }}</div>
          </div>
        </van-col>
      </div>
    </van-row>

    <div class="triger-menu-wrap">
      <!-- 展开/收起按钮 -->
      <div class="triger-btn" @click="hideOrShow">
        {{ functionMenuVisible ? '收起' : '展开' }}
        <!-- 图标 -->
        <van-icon :name="functionMenuVisible ? 'arrow-up' : 'arrow-down'" />
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 菜单按钮
*/
export default {
  name: 'FunctionMenu',
  data() {
    return {
      // 菜单是否展开
      functionMenuVisible: false,
      // 功能列表
      funcList: [
        {
          switch: [{label: '显示虚拟键', code: 'showKey', icon: 'icon-show'}, {label: '隐藏虚拟键', code: 'hideKey', icon: 'icon-hide'}],
          status: true,
        },
        {label: '剪切板', code: 'shearplate', icon: 'icon-clipboard'},
        // {label: '音量 +', code: 'volumeUp', icon: 'icon-clipboard'},
        // {label: '音量 -', code: 'volumeDown', icon: 'icon-clipboard'},
        {label: '摇一摇', code: 'shake', icon: 'icon-shake'},
        {label: '吹一吹', code: 'blow', icon: 'icon-blow'},
        {label: '截图', code: 'screenshot', icon: 'icon-screenshot'},
        // {label: '重启', code: 'estart', icon: 'icon-restart'},
      ]
    }
  },
  methods: {
    hideOrShow(){
      this.functionMenuVisible = !this.functionMenuVisible;
      // 延迟触发避免父组件获取不到最新的值
      this.$nextTick(() => {
        // 触发父组件事件
        this.$emit('functionMenuVisible', this.functionMenuVisible);
      })
    },
    funcHandle(item){
      if(item.switch){
        // 触发父组件事件
        this.$emit('funcHandle', item.switch[+item.status]);

        this.$nextTick(() => {
          // 切换状态
          item.status = !item.status;
        });
        return;
      }
      
      // 触发父组件事件
      this.$emit('funcHandle', item);
    }
  }
}
</script>

<style lang="scss" scoped>
.menu-btn-wrap{
  color: #fff;
  font-size: 12px;
  padding: 6px 0;
  .menu-item{
    padding: 6px 0;
    .icon-bg{
      width: 36px;
      height: 36px;
      border-radius: 50%;
      overflow: hidden;
    }
  }

  .triger-menu-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    .triger-btn{
      color: #979797;
      font-size: 10px;
    }
  }
}
</style>