2022-03-17 vue通过弹出气泡快速复制内容&禁止复制_element ui 列表弹出气泡内容可以复制-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44190736/article/details/123551620

本文介绍了在Vue项目中如何实现在禁止全页面复制的前提下，当鼠标移动到特定内容上弹出复制按钮的功能。通过在表格列中添加插槽和外部的输入框组件，结合相应的方法，实现了快捷复制。同时提供了禁止复制的两种实现方式：在标签内添加指令或在组件的created钩子中添加代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：页面做了禁止复制，要求鼠标移动到部分内容上可以出现快捷复制的按钮。
在这里插入图片描述为该列添加一个插槽，在这一列的columns写，

scopedSlots: { customRender: 'sparePartsNum' },

sparePartsNum为插槽名。

<template slot="sparePartsNum" slot-scope="text">
          <a-popover :getPopupContainer="getPopupContainer" placement="right">
            <template slot="content">
              <a-button @click="getText(text)">复制</a-button>
            </template>
            <div style="cursor: pointer;color: #1890ff;text-decoration: underline;">{{ text }}</div>
          </a-popover>
        </template>

还有一个输入框组件，写在a-table标签外面

<input id="copy_content" type="text" value=""  style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"/>

对应的方法

getPopupContainer(triggerNode){
      triggerNode.parentNode.parentNode.oncontextmenu = new Function("event.returnValue=false");
      triggerNode.parentNode.parentNode.onselectstart = new Function("event.returnValue=false");
      return document.getElementsByClassName('parts-data')[0];
},

parts-data是文件最外层的一个样式id
在这里插入图片描述
通过input小组件实现复制的函数

getText(event){
      let inputElement =  document.getElementById("copy_content");
      //给input框赋值
      inputElement.value = event;
      //选中input框的内容
      inputElement.select();
      // 执行浏览器复制命令
      document.execCommand("Copy");
      //提示已复制
      // alert("复制成功！");
},

把这些统统塞进去就可以实现了。
附上禁止复制代码
在需要禁止的标签里直接写

οncοntextmenu="return false" onselectstart="return false"

或者
直接在created里塞以下两句：

this.$nextTick(() => {
      // 禁用右键
      document.oncontextmenu = new Function("event.returnValue=false");
      // 禁用选择
      document.onselectstart = new Function("event.returnValue=false");
    });