elementUI 表格，超出顯示點，鼠標移入顯示全部並顯示復制按鈕

效果如下

 

 代碼：

copyText.vue

<template>
    <div @mouseleave="mouseleave(index = -1,'')">
        <p class="copyTextBoxWrap">
            <button type="button"
                v-sdc
                class="copyBtn"
                v-show="tableIndex == index && currentHover == columnName && isShowCopy" 
                v-clipboard:copy="copyTextName"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError">復制
            </button>
        </p>
        <el-popover popper-class="popover-self" placement="bottom" title="" width="190" trigger="manual" v-model="visible">
            <span v-html="copyTextName || '--'" ref="showCopyBtn" class="copyTextBox" slot="reference" @mouseover="mouseOver( index = tableIndex, columnName)">
                {{copyTextName || "--"}}
            </span>
            <!-- 針對有的頁面是標簽顯示問題 -->
            <span v-html="copyTextName || '--'"></span>
        </el-popover>
        {{content}}
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentHover: "",
            index: -1,
            visible:false,
            isShowCopy: false,
            tableIndex:"",
            copyTextName:"",
            columnName:""
        };
    },
    created() {
       
    },
    mounted() {
    },
    methods: {
        mouseOver(index,type) {
            if(type) {
                this.currentHover = type;
            }
            //是否有省略號，有省略號才顯示復制和懸浮窗
            this.isShowEllipse();
            // this.visible = true;
        },
        mouseleave() {
            this.currentHover = "";
            this.visible = false;
        },
        onCopy() {
            event.stopPropagation( );
            this.$message.success("復制成功");  
        },
        onError() {
            this.$message.error("復制失敗");  
        },
        isShowEllipse() {
            var scrollWidth = this.$refs.showCopyBtn.scrollWidth;
            var offsetWidth = this.$refs.showCopyBtn.offsetWidth
            if (scrollWidth > offsetWidth) {
                this.isShowCopy = true;
                this.visible = true;
            } else {
                // console.log("沒有出現省略號")
                this.isShowCopy = false;
                this.visible = false;
            }
        }
    }
};
</script>

<style lang="less">
.popover-self.el-popover--plain {
    padding: 8px!important;
    margin-left: -4px!important;
}
.copyBtn{
    cursor: pointer;
}
.el-popover {
    padding: 8px!important;
}
</style>

copyText.js

import Vue from 'vue'
import Copy from './copyText.vue'
const CopyIcon = Vue.extend(Copy);

export default {
  //第一次綁定到元素時調用
  bind: function (el, binding) {
    const copy = new CopyIcon({
      el: document.createElement('div'),
      data() {}
    })
    //用一個變量接住copy實例
    el.instance = copy
    el.appendChild(copy.$el);
    el.instance.tableIndex = binding.value.tableIndex;
    el.instance.copyTextName = binding.value.copyTextName.trim();
    el.instance.columnName = binding.value.columnName;
  },
  //組件變動時觸發
  update: function (el, binding) {
    
  },
  //指令與元素解綁時調用
  unbind: function (el) {
    el.instance && el.instance.$destroy()
  }
}

 

 在main.js里引用

 

 

頁面使用