✍️ 作者简介: 一个每天中午去打篮球和锻炼的前端开发。
⬛ 两只猫和一只狗的铲屎官
微博: GuoJ阝阝(fu)
记录一个前端项目中自己写的右侧菜单
很多项目需要右侧悬浮一些菜单,这些菜单可能会根据选中的内容进行变化,根据这个需求,我写了个简单的菜单栏。
提示:以下是本篇文章正文内容,下面案例可供参考
第一步,肯定是先上效果图,不合适的话也没必要往后看了。
:
<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函数选中的内容,可以设置弹出下一层菜单,或者弹出其他窗口。