Vue侧边菜单组件

✍️ 作者简介: 一个每天中午去打篮球和锻炼的前端开发。

‍⬛ 两只猫和一只狗的铲屎官

微博: GuoJ阝阝（fu）

---

前言

记录一个前端项目中自己写的右侧菜单

很多项目需要右侧悬浮一些菜单，这些菜单可能会根据选中的内容进行变化，根据这个需求，我写了个简单的菜单栏。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、实现效果

第一步，肯定是先上效果图，不合适的话也没必要往后看了。

![菜单展开状态](https://img-blog.csdnimg.cn/ed1438c777204c86b8ae3fd59f315307.png

二、使用步骤

代码如下（示例）：

<div class="object-menu">
    <ul class="card">
      <van-popover v-model="showPopover" theme="dark" :placement="popPosition" :actions="popMenu" @select="onSelectEdit">
        <template #reference>
          <li
            v-for="(item, index) in menuList"
            :key="index"
            class="card-item"
            :class="{ selected: currentActive == item.value }"
            @click="handleClick(item, index)"
          >
            <van-icon :name="item.icon" />
            <span class="card-item-word">{{item.name}}</span>
          </li>
        </template>
      </van-popover>
    </ul>
 </div>

import { Popover } from "vant";
Vue.use(Popover);

export default {
  name: "ObjectMenu",
  data() {
    return {
    	showPopover: false,
    	popPosition: 'left-start',
    	currentActive: '',
    	popMenu: [
    		{ text: '移动', icon: 'aim', className: 'edit-pop-li' },
        	{ text: '尺寸', icon: 'scan', className: 'edit-pop-li' },
        	{ text: '旋转', icon: 'replay', className: 'edit-pop-li' },
        	{ text: '删除', icon: 'delete-o', className: 'edit-pop-li' },
        	{ text: "动画", icon: "tv-o", className: "edit-pop-li" }
		],
		menuList: [
        {
          name: "操作",
          value: "content",
          icon: "setting-o"
        },
        {
          name: "属性",
          value: "property",
          icon: "label-o"
        },
        {
          name: "编辑",
          value: "edit",
          icon: "edit"
        }
      ],
    }
  },
  methods: {
  	// 判断选中了菜单中的哪一项，这里以icon的名称进行判断。
  	onSelectEdit(action) {
      // 移动
      if (action.icon === "aim") {
      	// 触发父组件的函数
        this.$emit('handleMoveEntity')
      // 尺寸
      } else if (action.icon === "scan") {
        window.gizmoManager.scaleGizmoEnabled = true
      }
    },
    // 点击菜单的下一步操作，当重复选中同一菜单时，取消选中状态
    handleClick(item, val) {
      if (this.currentActive === item.value) {
        this.currentActive = ''
      } else {
        this.currentActive = item.value
      }
    }
  }
}

.object-menu {
  display: flex;
  .card {
    user-select: none;
    font-weight: @font-weight-bold;
    font-size: @font-size-xxxs * 2 + @font-size-sm;
    letter-spacing: 2px;
    text-align: center;
    line-height: 22px;
    margin-right: 10px;
    border-radius: 0.2rem;
    .card-item {
      padding: 0.15rem 0.15rem;
      border-right: none;
      border-bottom: 1px solid @blue;
      background-color: rgba(50, 50, 50, 0.5);
      color: white;
      letter-spacing: 4px;
      width: 0.8rem;
      height: 1.2rem;
      .card-item-word {
        user-select: none;
        font-size: 0.2rem;
      }
      .van-icon {
        font-size: 0.8rem;
        margin-bottom: 0.1rem;
      }
      &:first-child {
        border-radius: 0.2rem 0.2rem 0 0;
      }
      &:last-child {
        border-radius: 0 0 0.2rem 0.2rem;
      }
    }
    .card-node-item {
      padding: 0.15rem 0.15rem;
      width: calc(100% - 0.6rem);
      height: 0.8rem;
      line-height: 0.8rem;
      margin: 0.2rem;
      border-radius: 0.2rem;
      background-color: rgba(180, 180, 180, 0.3);
      .van-col {
        overflow: hidden;
      }
    }
    .selected {
      color: @white;
      background-color: @blue;
      margin: 0;
      padding: 0.15rem 0.15rem;
    }
  }
}

总结

这个组件的改造空间很大。第一，可以根据父组件传递的内容设置menuList的值，实现悬浮菜单的实时变化；第二，根据handleClick函数选中的内容，可以设置弹出下一层菜单，或者弹出其他窗口。