vue(33) : 表格内容过长隐藏并悬浮展示

vue

        <template slot-scope="{row}">
          <el-popover placement="top" trigger="hover">
            <template>
              <div v-html="row.name"  @dblclick="copyToClipboard(row.name)"></div>
            </template>
            <div slot="reference" class="tab-content"  @dblclick="copyToClipboard(row.name)">
              {{ row.name}}
            </div>
          </el-popover>
        </template>

style

<style>
  .tab-content {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>

function

      copyToClipboard(text) {
        // 创建一个文本域元素
        const textArea = document.createElement("textarea");
        // 设置文本域的内容为需要复制的文本
        textArea.value = text;
        // 将文本域添加到DOM元素中（需要可见的DOM元素，但可以不显示）
        document.body.appendChild(textArea);
        // 选中文本域的内容
        textArea.select();
        try {
          // 执行复制命令
          document.execCommand('copy');
          this.$notify({
            title: '复制成功',
            type: 'success',
            duration: 2000
          })
        } catch (err) {
          console.error('复制失败', err);
        }
        // 移除文本域
        document.body.removeChild(textArea);
      }