1.实现效果如下,
2.代码如下
<template>
<div class="test">
<div class="wrap" v-click-outside>
<el-input v-model="input" placeholder="请输入内容"></el-input>
<div class="content" v-show="isShowContent">
<el-button @click.stop="handleClick">关闭</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
directives: {
clickOutside: {
//指令的生命周期,
bind(el, bindings, vnode) {
console.log("el", el);
console.log("bindings", bindings);
console.log("vnode", vnode);
//el 最外层元素,bindings 指令名称 vnode上下文对象 context 上下文对象
let handler = (e) => {
// console.log("e", e);
if (el.contains(e.target)) {
//判断当前面板是否已经显示出来
if (!vnode.context.isShowContent) {
vnode.context.focus();
}
} else {
if (vnode.context.isShowContent) {
vnode.context.blur();
}
}
};
el.handler = handler;
document.addEventListener("click", handler);
},
unbind(el) {
document.addEventListener("click", el.handler);
},
},
},
data() {
return {
input: "",
isShowContent: false,
};
},
components: {},
methods: {
handleClick() {
this.isShowContent = false;
},
focus() {
this.isShowContent = true;
},
blur() {
this.isShowContent = false;
},
},
};
</script>
<style lang='less' scoped>
.test {
width: 200px;
height: 300px;
margin: 0 auto;
// border: 1px solid #ccc;
.wrap {
position: relative;
.content {
position: absolute;
left: 0;
top: 40px;
// background: red;
width: 100%;
height: 200px;
border: 1px solid #ccc;
}
}
}
</style>
3.打印指令里的三个元素
4.大体功能实现 了,可以自定义content里的内容了