80 lines
2.3 KiB
Vue
80 lines
2.3 KiB
Vue
<template>
|
||
<div class="my-dropdown" @click.stop="trigger == 'click' ? (showMenu = !showMenu) : ''"
|
||
@mouseenter="trigger == 'hover' ? (showMenu = true) : ''"
|
||
@mouseleave="trigger == 'hover' ? (showMenu = false) : ''" ref="myDropDdown" >
|
||
<div class="tip-text" ref="tipText">
|
||
<slot></slot>
|
||
</div>
|
||
<slot name="list"></slot>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import emitter from "./emitter";
|
||
export default {
|
||
name: "MyDropdown",
|
||
componentName: "MyDropdown",
|
||
mixins: [emitter],
|
||
props: {
|
||
// 触发显示方式
|
||
trigger: {
|
||
type: String,
|
||
default: "click",
|
||
},
|
||
// 下来菜单的出现位置（上方，下方）
|
||
placement: {
|
||
type: String,
|
||
default: "bottom",
|
||
validator: function (value) {
|
||
// 这个值必须匹配下列字符串中的一个
|
||
return ["bottom", "top"].includes(value);
|
||
},
|
||
},
|
||
},
|
||
data () {
|
||
return {
|
||
//控制菜单是否显示
|
||
showMenu: false,
|
||
};
|
||
},
|
||
mounted () {
|
||
//初始化自定义事件
|
||
this.initEvent();
|
||
},
|
||
methods: {
|
||
// 初始化
|
||
initEvent () {
|
||
//订阅当item点击的时候，发布on-click事件，告知外部
|
||
this.$on("item-click", (params) => {
|
||
this.$emit("on-click", params);
|
||
this.showMenu = false;
|
||
});
|
||
//空白点击要隐藏菜单，需要执行的函数需要绑定this指向
|
||
this.handleEmptyDomElementClickBindThis =
|
||
this.handleEmptyDomElementClick.bind(this);
|
||
window.addEventListener("click", this.handleEmptyDomElementClickBindThis);
|
||
},
|
||
// 处理空白区域点击，隐藏菜单列表
|
||
handleEmptyDomElementClick (e) {
|
||
if (!Array.from(this.$refs.myDropDdown.childNodes).includes(e.target)) {
|
||
this.showMenu = false;
|
||
}
|
||
},
|
||
},
|
||
beforeDestroy () {
|
||
// 移除window上面的事件
|
||
window.removeEventListener(this.handleEmptyDomElementClickBindThis);
|
||
},
|
||
watch: {
|
||
//变化的时候，通知子组件隐藏菜单列表
|
||
showMenu () {
|
||
this.broadcast("MyDropdownMenu", "set-menu-status", this.showMenu);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.my-dropdown {
|
||
position: relative;
|
||
}
|
||
</style>
|