<template>
<div class="pop-over">
<a @click="toggleOpen" class="pop-button" href="javascript: void(0);">
{{ buttonText }}你好呀
</a>
<ul v-clickoutside="close" v-show="open" class="pop-list">
<slot><li>1</li></slot>
</ul>
</div>
</template>
<script>
export default {
name: "PopOver",
props: ["buttonText"],
data() {
return {
open: false,
};
},
methods: {
toggleOpen: function () {
this.open = !this.open;
},
close: function (e) {
console.log("close", e.target);
if (this.$el.contains(e.target)) return;
this.open = false;
},
},
directives: {
clickoutside: {
bind: function (el, binding, vnode) {
console.log(el, binding, vnode);
console.log(vnode.context);
const documentHandler = function (e) {
if (!vnode.context || el.contains(e.target)) return;
binding.value(e);
};
setTimeout(() => {
document.addEventListener("click", documentHandler);
}, 0);
},
},
},
};
</script>
<style scoped>
.pop-over {
position: relative;
width: 100px;
height: 100px;
background-color: rgb(161, 16, 16);
}
.pop-button {
position: relative;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
}
.pop-list {
position: absolute;
left: 0;
top: 0;
}
.pop-list li {
width: 100%;
height: 100%;
padding: 8px 3px;
list-style: none;
}
</style>
vue中实现element的Popper功能
最新推荐文章于 2024-07-09 08:29:27 发布