前言

我有一个表格需要展现员工个人业绩，大家都知道重名是不可避免的，所以我希望能够标识出该员工所对应的区域和机构，以此来区分人员。但在移动端屏幕空间有限，所以决定在点击人员时，右侧弹出他所在的区域和机构。

效果

popover组件具体代码

<template>
    <div class="pop-over">
        <a @click="toggleOpen" class="pop-button" href="javascript: void(0);">
            {{ buttonText }}
        </a>
        <div v-clickoutside="close" v-show="open" class="pop-list">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
  name: 'PopOver',
  props: ['buttonText'],
  data () {
    return {
      open: false
    }
  },
  methods: {
    toggleOpen: function () {
      this.open = !this.open
    },
    close: function (e) {
      if (this.$el.contains(e.target)) return
      this.open = false
    }
  },
  directives: {
    clickoutside: {
      bind: function (el, binding, vnode) {
        const documentHandler = function (e) {
          if (!vnode.context || el.contains(e.target)) return
          binding.value(e)
        }
        el.clickoutsideContext = {documentHandler}
        setTimeout(() => {
          document.addEventListener('click', documentHandler)
        }, 0)
      },
      unbind (el) {
        console.log('unbind')
        document.removeEventListener('click', el.clickoutsideContext.documentHandler)
      }
    }
  }
}
</script>

<style scoped>
.pop-over {
    position: relative;
    width: 100%;
    height: 100%;
}
.pop-button {
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration:none;
    color: inherit;
}
.pop-list {
    position: absolute;
    left: 100%;
    top: 0;
    background:#35495e;
    color:#fff;
    border-radius: 3PX;
    padding: 10px;
    text-overflow:ellipsis;  /*超过部分用点点表示*/
    white-space:nowrap;/*不换行*/
}
</style>

用法

<template>
     <myPopover :buttonText="item.employeeName">
        <div>{{item.regionName}}-{{item.orgName}}</div>
     </myPopover> 
</template>

<script>
import myPopover from '@/components/popover'
export default {
  name: '',

  mixins: [],

  components: {myPopover},

  props: {},

  data () {
    return {}
  },

  computed: {},

  watch: {},

  created () {},

  mounted () {},

  destroyed () {},

  methods: {}
}
</script>

<style scoped>

</style>