样式效果
效果1
效果2
效果1组件调用
<template>
<div>
<div v-for="item in tableArr" :key="item">
<Dropdown
:propObj="item"
@change="menuChange"
:selectData="menuSelect.menuSelectData"
:buttonIcon="menuSelect.buttonIcon"
></Dropdown>
</div>
</div>
</template>
<script>
import Dropdown from "@/components/selectMenu/index.vue"
export default {
data () {
return {
tableArr: [],
menuSelect: {
menuSelectData: [
{ id: "Open", defaultIcon: require("@/views/Home/imgs/open.svg"), hoverIcon: require("@/views/Home/imgs/open_hover.svg") },
{ id: "Rename", defaultIcon: require("@/views/Home/imgs/Rename.png"), hoverIcon: require("@/views/Home/imgs/Rename_hover.svg") },
{ id: "copy", defaultIcon: require("@/views/Home/imgs/copy.png"), hoverIcon: require("@/views/Home/imgs/copy_hover.svg") },
{ id: "Export", defaultIcon: require("@/views/Home/imgs/Export.png"), hoverIcon: require("@/views/Home/imgs/Export_hover.svg") },
{ id: "Delete", defaultIcon: require("@/views/Home/imgs/Delete.png"), hoverIcon: require("@/views/Home/imgs/Delete_hover.svg") },
],
buttonIcon: require('@/views/Home/imgs/btn.svg'),
}
}
},
methods: {
// 菜单选择
menuChange (item, row) {
// item : 菜单按钮key row：tableArr中的选中对象
if (item === 'Open') {
// 打开
console.log(item);
} else if (item === 'Rename') {
this.openReName(row)
} else if (item === 'copy') {
// 复制
} else if (item === 'Export') {
// 导出
} else if (item === 'Delete') {
// 删除
this.openDele(row)
}
},
},
components: {
Dropdown
}
}
</script>
效果2组件调用
<template>
<div>
<Dropdown
@change="menuChange"
:selectData="menuSelect.menuSelectData"
:buttonIcon="menuSelect.buttonIcon"
mouseLeaveHidden
:buttonStyle="{width:'40px'}"
:styleItem="{lineHeight:`48px`, marginBottom:`8px`}"
>
<template v-slot:header>
<div class="setIcon">
<img
src="../../imgs/header.svg"
alt=""
>
<div class="name">
gongliming@xxxxxxxxxxxxxxxxxxxxxxxxx.cn
</div>
</div>
</template>
</Dropdown>
</div>
</template>
<script>
import Dropdown from "@/components/selectMenu/index.vue"
export default {
data () {
return {
loginStatus: false,
menuSelect: {
menuSelectData: [
{ id: "My Mindmap", defaultIcon: require("@/views/Home/imgs/headerIcon.png"), hoverIcon: require("@/views/Home/imgs/headerIcon.png") },
{ id: "Logout", defaultIcon: require("@/views/Home/imgs/log-out.svg"), hoverIcon: require("@/views/Home/imgs/log-out.svg") },
],
buttonIcon: require('@/views/Home/imgs/header.svg'),
},
}
},
methods: {
// 菜单选择
menuChange (item) {
// item : 菜单按钮key row：当前选中对象
if (item === 'Logout') {
this.toLoginOut()
}
},
},
components: {
Dropdown
}
}
</script>
<style lang="less" scoped>
.setIcon {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
word-wrap: break-word;
padding: 0 13px;
box-sizing: border-box;
.name {
font-weight: 500;
font-size: 14px;
line-height: 17px;
margin-top: 12px;
margin-bottom: 20px;
width: 251px;
word-wrap: break-word;
text-align: center;
height: 30px;
}
}
</style>
下拉菜单组件
传参props ：
- propObj ：数据类型（对象），如果作用再v-for中，可能需要获取传递过来的数据（非必须）
- selectData：数据类型（数组），格式为[{id,hoverIcon,defaultIcon}] （非必须）
- buttonIcon：数据类型（字符串），激活按钮图片url，或者使用插槽，v-slot:triggerButton（非必须）
- mouseLeaveHidden : 数据类型（布尔），是否需要移出下拉菜单后下拉菜单不会立即消息（非必须）
- buttonStyle：数据类型（对象），当传入buttonIcon后可控制激活按钮图片样式（非必须）
- styleItem：数据类型（对象），控制下拉菜单单个样式（非必须）
插槽slot：
- triggerButton：自定义激活按钮
- header：自定义下拉菜单头部样式
事件event：
- change ：选中菜单执行， 参数：（选中id，传入的propObj ）：参数2可选
组件代码：
<template>
<div>
<el-dropdown
trigger="click"
:ref="`dropdown_${propObj.id}`"
@command="dropdownSelect($event, propObj)"
>
<!-- 激活按钮 -->
<img
v-if="buttonIcon"
class="buttonImg"
:style="{...buttonStyle}"
:src="buttonIcon"
>
<slot
v-else
name="triggerButton"
></slot>
<el-dropdown-menu
slot="dropdown"
:style="{...boxStyle}"
@mouseenter.native="singleEnter(propObj)"
@mouseleave.native="singleNativeLeave(propObj)"
>
<slot name="header"></slot>
<el-dropdown-item
:command="item.id"
v-for="item in lists"
:key="item.id"
:style="{...styleItem}"
>
<div
class="setDropdownSingle"
@mouseleave="changImgByLeave(item)"
@mouseenter="changImgByEnter(item)"
> <img :src="item.status? item.hoverIcon:item.defaultIcon">
<span>{{item.id}}</span>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
import _ from "lodash"
export default {
data () {
return {
lists: [],
timer:null
}
},
props: {
// 可能有v-for遍历需要存储当前的遍历值
propObj: {
type: Object,
default: () => {
return {
id: 1
}
}
},
// 下拉选择菜单
selectData: {
type: Array,
default: () => {
return []
}
},
// 按钮图片
buttonIcon: {
type: String,
default: ''
},
// 移出modal是否需要隐藏下拉菜单
mouseLeaveHidden: {
type: Boolean,
default: false
},
// 激活按钮样式
buttonStyle: {
type: Object,
default: () => {
return {}
}
},
// 单行样式
styleItem: {
default: () => {
return {}
}
},
// 盒子样式
boxStyle: {
default: () => {
return {}
}
}
},
methods: {
dropdownSelect (item, row) {
// item : 菜单按钮key row：当前选中对象
this.$emit('change', item, row)
},
singleEnter (row) {
row.menuShow = true
clearTimeout(this.timer)
},
singleLeave (row) {
row.menuShow = false
},
singleNativeLeave (row) {
if (this.mouseLeaveHidden) {
this.timer = setTimeout(() => {
row.menuShow = false
this.$refs['dropdown_' + row.id].visible = false
},300)
}
},
changImgByEnter (row) {
row.status = true
},
changImgByLeave (row) {
row.status = false
}
},
created () {
this.lists = _.cloneDeep(this.$props.selectData) || []
this.lists.forEach(item => {
this.$set(item, 'status', false)
})
}
}
</script>
<style scoped lang="less">
.setDropdownSingle {
display: flex;
align-items: center;
border-radius: 8px;
padding: 0 8px;
> img {
margin-right: 12px;
}
&:hover {
background-color: #5452f6;
color: #fff;
}
}
.buttonImg {
cursor: pointer;
}
/deep/ .el-dropdown-menu__item:not(.is-disabled):hover {
background-color: transparent;
color: #606266;
}
/deep/ .el-tooltip__popper {
max-width: 180px;
max-height: 94px;
overflow: hidden;
}
.el-dropdown-menu__item {
padding: 0 10px;
}
</style>
