|
v-close放在点击不关闭下拉框的标签上
专业
![](span"../assets/images/sanjiao.png"/span)
搜索
1
2
3
与data同级
directives: {
close: {
inserted(el, binding, vnode) {
window.addEventListener("click", (e) => {
if (!el.contains(e.target)) {
vnode.context.showOpt = false;
}
});
},
},
},
 另一种方式: 是在聚焦textarea框的时候,高度变大,点击其他地方高度恢复(用了上边的不生效,也不知道为啥),用这种方法也是把这部分抽离出来当成一个组件用才生效(还没整明白问题 出在哪里)
import Emotion from "../components/Emotion/index.vue";
const clickoutside = {
// 初始化指令
bind(el, binding, vnode) {
function documentHandler(e) {
// 这里判断点击的元素是否是本身，是本身，则返回
if (el.contains(e.target)) {
return false;
}
// 判断指令中是否绑定了函数
if (binding.expression) {
// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
binding.value(e);
}
}
// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
el.__vueClickOutside__ = documentHandler;
document.addEventListener("click", documentHandler);
console.log(111);
},
unbind(el, binding) {
console.log(1211);
// 解除事件监听
document.removeEventListener("click", el.__vueClickOutside__);
delete el.__vueClickOutside__;
},
};
export default {
name: "Reply",
components: {
Emotion,
},
data() {
return {
heightchange: false,
};
},
directives: { clickoutside },
methods: {
handle() {
console.log(111333);
if (!this.content) {
this.heightchange = false;
}
console.log(this.heightchange);
},
handleEmotion(i) {
this.content += i;
},
textareafocus() {
console.log(23);
this.heightchange = true;
},
},
};
 
|