教你开发vue移动端组件之popover

• 前言

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

• 效果

• 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>