这篇博客,主要是记录自己每天遇到的问题,以及待解决的问题.
github仓库地址
001: 在element-ui中, el-dropdown-menu 下拉菜单渲染后的定位问题,为什么下拉的菜单列表,要放在body中,而不是直接在父元素里面?
需求是: 主页只有很多的卡片频道,每个频道都有一个 el-icon-more (更多)的按钮,因为卡片很多,考虑到功能问题,不能每个卡片都放一个相同的菜单,这样的话,页面初始化的时候,会很慢,所以,pm说,将这个菜单标签,只放一份在body中,当点击这个按钮的时候,这个菜单,直接定位到点击的下面,显示出来;
查阅资料发现,在element-ui中,所用到的技术是 popper.js;初次接触的时候,看不懂,但是我们可以直接从element-UI中的源码导出我们想要的api接口就行;
具体代码如下:
`<template>
<div v-show="visible">
<ul class="gk-down-ul">
<li v-for="(item,index) in dropMenus" @click="handleClick"
:key="index"></li>
</ul>
</div>
</template>`
methods: {
handleClickoutside() {
this.visible = false;
},
handleClick() {
this.visible = false;
},
show() {
this.visible = true;
},
hiden() {
this.visible = false;
},
initEvent() {
let self = this;
//有个坑 ,就是在vue的methods中,不能使用箭头函数,如果使用,this(指的是window)的指向会改变为window
// self.$refs.down.addEventListener("mouseenter", self.show);
self.$el.addEventListener("mouseenter", self.show);
self.$el.addEventListener("mouseleave", self.hiden);
}
},
import Clickoutside from “element-ui/lib/utils/clickoutside.js”;
从element-ui中导入点击文档任意位置的指令,然后在单文件index.vue中注册这个指令directives: { Clickoutside };
主要涉及到的知识点是 :popper.js,mixins混合遇到的坑就是,将popper认为是一个vue中的属性,把他混合起来了,结果在popper中的属性全部报错undefind ,props才是传值的属性,只有vue中有的属性才能混合,比如:methods,created,等生命周期函数才能混合,不是所有的属性和方法都能混合的.
