陶醉的松鼠介绍
实现点击按钮，依照点击元素位置，弹出窗口，点击旁边自动关闭
代码
vue
<template>
<div class="my-picker" v-clickoutside="hidePanel"
v-loading.fullscreen.lock="fullscreenLoading"
element-loading-text=""
element-loading-spinner="none"
element-loading-background="rgba(0, 0, 0, 0.2)"
>
<el-link type="primary" @click="showPopper = !showPopper">{{ userItem.evaluate_user_name }}</el-link>
<apopper :ref="popper"
v-model="showPopper"
placement="right-end"
:visible-arrow="true"
></apopper>
<div :ref="myId" v-show="showPopper" class="my-picker__popper">
<div v-loading="loading">
<div class="header-box">
<label style="font-size: 12px; line-height: 38px;">{{ userItem.evaluate_user_name }}</label>
<el-row class="right-row">
<el-button type="text" @click="ReloadThis">查看详情</el-button>
</el-row>
</div>
<div class="text-box">
<span>360°评估成绩：{{ infoRowData.score || '-' }}</span>
<span>360°评估成绩(科学计算)：{{ infoRowData.scientific_calculation_score || '-' }}</span>
</div>
<el-tabs v-model="activeName">
<el-tab-pane label="我给他人的评估" name="first">
<el-table
:data="tableData"
:key="myId"
element-loading-text="努力加载中"
border
size="mini"
class="table-gray"
max-height="260"
>
<el-table-column prop="score" label="360°评分" align="center" min-width="66" sortable />
<el-table-column prop="" label="被评估人" align="center" min-width="100">
<template slot-scope="{ row }">
<div class="text-icon-box">
<el-tooltip class="item" effect="dark" content="上级" placement="top-end">
<svg-icon icon-class="shangji" v-if="row.evaluate_relation === 20" />
</el-tooltip>
<el-tooltip class="item" effect="dark" content="下级" placement="top-end">
<svg-icon icon-class="xiaji" v-if="row.evaluate_relation === 10" />
</el-tooltip>
<el-tooltip class="item" effect="dark" content="协同" placement="top-end">
<svg-icon icon-class="xiezuo" v-if="row.evaluate_relation === 30" />
</el-tooltip>
<span>{{ row.be_evaluate_user_name }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="" label="评分区间" align="center" min-width="80">
<template slot-scope="{ row }">
{{ row.min_score }}-{{ row.max_score }}
</template>
</el-table-column>
<el-table-column prop="" label="评分排名" align="center" min-width="66">
<template slot-scope="{ row }">
{{ row.rank || '--' }}/{{ row.rank_total }}
</template>
</el-table-column>
<el-table-column prop="label" label="被评估人标签" align="center" min-width="88">
<template slot-scope="{ row }">
{{ row.label || '-' }}
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="他人给我的评估" name="second">
<el-table
:data="tableData_tow"
:key="myId"
element-loading-text="努力加载中"
border
size="mini"
class="table-gray"
max-height="260"
>
<el-table-column prop="score" label="360°评分" align="center" min-width="66" sortable />
<el-table-column prop="evaluate_user_name" label="评估人" align="center" min-width="100">
<template slot-scope="{ row }">
<div class="text-icon-box">
<el-tooltip class="item" effect="dark" content="上级" placement="top-end">
<svg-icon icon-class="shangji" v-if="row.evaluate_relation === 10" />
</el-tooltip>
<el-tooltip class="item" effect="dark" content="下级" placement="top-end">
<svg-icon icon-class="xiaji" v-if="row.evaluate_relation === 20" />
</el-tooltip>
<el-tooltip class="item" effect="dark" content="协同" placement="top-end">
<svg-icon icon-class="xiezuo" v-if="row.evaluate_relation === 30" />
</el-tooltip>
<span>{{ row.evaluate_user_name }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="" label="评分区间" align="center" min-width="80">
<template slot-scope="{ row }">
{{ row.min_score }}-{{ row.max_score }}
</template>
</el-table-column>
<el-table-column prop="" label="评分排名" align="center" min-width="66">
<template slot-scope="{ row }">
{{ row.rank || '--' }}/{{ row.rank_total }}
</template>
</el-table-column>
<el-table-column prop="label" label="评估人标签" align="center" min-width="88">
<template slot-scope="{ row }">
{{ row.label || '-' }}
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</template>
vue
<script>
import apopper from 'element-ui/src/utils/vue-popper'
apopper.render = (h) => h(null)
export default {
name: 'Ass360ListPover',
mixins: [],
filters: {},
components: {
apopper
},
props: {
},
data() {
return {
activeName: 'first',
showPopper: false,
myId: 'fly-piece' + new Date().getTime(),
popper: 'popper' + new Date().getTime(),
loading: false,
}
},
computed: {},
watch: {
showPopper: {
immediate: true,
deep: false,
handler(newValue, oldValue) {
if (newValue) {
}
}
}
},
created() {
},
mounted() {
this.$refs[this.popper].popperElm = this.$refs[this.myId]
this.$refs[this.popper].referenceElm = this.$el
},
destroyed() {
},
methods: {
hidePanel() {
if (this.showPopper) {
}
this.showPopper = false
},
},
directives: {
clickoutside: {
bind(el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false
}
if (binding.expression) {
binding.value(e)
}
}
function KeyUp(e) {
if (e.keyCode == 27) {
if (binding.expression) {
binding.value(e)
}
}
}
el.__vueClickOutSize__ = documentHandler
el.__vueKeyup__ = KeyUp
document.addEventListener('keyup', KeyUp)
document.addEventListener('click', documentHandler)
},
unbind(el, binding) {
document.removeEventListener('click', el.__vueClickOutSize__)
delete el.__vueClickOutSize__
document.removeEventListener('keyup', el.__vueKeyup__)
delete el.__vueKeyup__
}
}
}
}
</script>
css
.el-tooltip__popper.is-dark {
z-index: 10001 !important;
}
.my-picker__popper {
width: 500px;
padding: 0 12px 12px;
height: auto;
min-height: 366px;
overflow: hidden;
background-color: white;
border: #cccccc;
border-radius: 5px;
box-shadow: 2px 2px 4px 3px rgba(187, 187, 187, 0.26);
z-index: 9999 !important;
}