个人需求:
点击dom展示出该行数据的详细信息。
解决方案:
使用element ui的对话框组件或者弹出框组件。
疑问:
element ui官方文档上的弹出框组件针对于每个dom都需要套一个。这个太蠢了,忍不住
重点:
pop组件中有一个referenceElm属性可以调整关联的dom元素(就是希望点击哪个dom出现弹层的那个dom)
// 组件配置
<el-popover
ref="accessPopover"
placement="top-start"
popper-class="access-detail-section"
trigger="click"
width="400"
title="详细信息"
:visible-arrow="false"
></el-popover>
// 方法
openDetail(item) {
this.selectedAccessData = item
let dom = this.$refs['accessPopover']
dom.referenceElm = window.event.target
dom.createPopper() // 这个是必须的,不然是不会进行重新计算的
dom.doShow()
// Object(dom_["on"])(document, 'click', this.handleDocumentClick);
},
一般到这里就结束了,想要的效果也就有了。
但是如果有人找茬,希望在点击body的时候可以关闭这个组件(上述方法由于没有相对可定位的dom,所以界面上是没有绑定任何事件的)
组件本身会提供handleDocumentClick方法,只需要将这个方法在界面上进行绑定,同时修改组件配置中的reference属性(:reference=“selectedDom”,selectedDom实际上就是window.event.target)