模仿微信右上角加号菜单

<style lang="scss">
.menu {
  position: absolute;
  top: 46px;
  right: 10px;
  z-index: 100;
  width: 160px;
  background: #373A41;
  box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
  .menu-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 15px;
    padding: 5px;
    border-top: 1px solid #2D3035;
    color: #ffffff;
    &:active {
      background-color: #323136;
    }
    >img {
      width: 22px;
      height: 22px;
      margin: 0 15px 0 10px;
    }
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>
<template>
    <!--:right-options="{showMore: true}" @on-click-more="showMenu = !showMenu"-->
    <x-header :left-options="{backText: '',showBack:false}"
           style="background:linear-gradient(to right,#303030,#303030);">
      <span slot="left" style="color: #fff;font-size: 18px;">微信</span>
      <img  slot="right" width="22" src="http://gplove.top/icon-add2.png" @click="showMenu = !showMenu">
      <transition name="fade">
        <ul class="menu" v-show="showMenu">
          <li class="menu-item">
            <img src="http://gplove.top/icon-chat2.png" alt="">
            <span>发起群聊</span>
          </li>
          <li class="menu-item">
            <img src="http://gplove.top/icon-addfriend2.png" alt="">
            <span>添加朋友</span>
          </li>
          <li class="menu-item">
            <img src="http://gplove.top/icon-qrcode2.png" alt="">
            <span>扫一扫</span>
          </li>
          <li class="menu-item">
            <img src="http://gplove.top/icon-xinfeng2.png" alt="">
            <span>帮助与反馈</span>
          </li>
        </ul>
      </transition>
    </x-header>
</template>
<script>
  import { XHeader } from 'vux'
  export default {
    name: "test",
    components: { XHeader },
    data() {
      return {
        showMenu: false,
      }
    },
 }     
</script>
复制代码