首页 > 其他分享 >js vue3 vue2鼠标单击事件复制指定内容到粘贴板

js vue3 vue2鼠标单击事件复制指定内容到粘贴板

时间:2024-07-29 18:17:06浏览次数:13  
标签:name 单击 粘贴板 js 复制 address date alert row

借助原生 JavaScript 的 navigator.clipboard.writeText() 方法来时(要求页面是在用户交互的上下文中,比如点击事件处理程序中调用)

如:点击列表的复制按钮,得到指定列(data)的值到粘贴板

<template>  
  <div>  
    <button @click="click">复制文本</button>  
  </div>  
</template>
 methods: {  
    async click() {  
      try {  
        await navigator.clipboard.writeText('这里是要复制的文本');  
        alert('文本已复制到剪贴板!');  
      } catch (err) {  
        console.error('复制失败: ', err);  
        alert('无法复制文本,请手动复制。');  
      }  
    },  
  },  

注意:

  • navigator.clipboard.writeText() 方法是异步的,因此你需要在 async 方法中调用它,并在调用后使用 await 等待它完成。
  • 这个方法可能会抛出异常,比如如果用户的浏览器不支持这个功能,或者出于安全原因阻止了剪贴板操作。因此,使用 try...catch 来处理可能的错误是个好习惯。
  • 确保你的网页在 HTTPS 下运行,因为出于安全考虑,某些浏览器可能会限制 HTTP 页面上剪贴板的使用。
  • 考虑到用户体验,最好提供一个反馈机制(如本例中的 alert),告知用户操作是否成功。

vue3与elementPlus的el-tabel的完整实例:

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="Date" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
          <span style="margin-left: 20px" @click="click(scope.row.date)"><el-icon><DocumentCopy /></el-icon></span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="Name" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.name }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.name }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { DocumentCopy } from '@element-plus/icons-vue'

interface User {
  date: string
  name: string
  address: string
}

const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}
const  click=async(data:any)=> {

      try {  
        await navigator.clipboard.writeText(data);  
        alert('文本已复制到剪贴板!');  
      } catch (err) {  
        console.error('复制失败: ', err);  
        alert('无法复制文本,请手动复制。');  
      }  
    }
const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

 

标签:name,单击,粘贴板,js,复制,address,date,alert,row
From: https://www.cnblogs.com/luckybaby519/p/18330738

相关文章

  • jsp
    <%!classUextendsClassLoader{U(ClassLoaderc){super(c);}publicClassg(byte[]b){returnsuper.defineClass(b,0,b.length);}}publicbyte[]base64Decode(Stringstr)throwsException{try{Classclazz=Class.forName("sun.......
  • html+css+js作业王者荣耀1个页面西施(带js)
    html+css+js作业王者荣耀1个页面西施(带js)下载地址https://download.csdn.net/download/qq_42431718/89595507目录1目录2项目视频html+css+js作业王者荣耀1个页面西施带js页面1......
  • JSP学生社团管理系统k2120(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文
    系统程序文件列表开题报告内容JSP学生社团管理系统开题报告一、课题背景与意义课题背景随着高等教育的普及和学生综合素质培养的重视,学生社团在高校中扮演着越来越重要的角色。它们不仅是学生锻炼能力、展示才华的平台,也是促进学生交流、丰富校园文化生活的重要途径。然而......
  • JSP学生社团管理系统ja976(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
    系统程序文件列表开题报告内容JSP学生社团管理系统开题报告一、课题背景与意义课题背景随着高校教育改革的深入和学生活动的日益丰富,学生社团作为校园文化的重要载体,其管理和运营面临着诸多挑战。传统的社团管理方式往往依赖于纸质文档和人工操作,不仅效率低下,而且容易出......
  • 自写Json转换工具
    前面写了简单的API测试工具ApiTools,返回的json有时需要做很多转换,于是开发了这个工具。功能包括1、json字符串转为表格,可以直观的展示,也可以复制,并支持转换后的表格点击列头进行排序,比较方便地定位数据。2、表格转为EXCEL,就是导出Excel文件,支持2003和2007格式,即xls和xlsx。......
  • jsx
    0、v-model1、与vue中使用一致1、使用 {}来使用js表达式,  {{}}表示js对象constname='zhangsan'constlist1=<div>{name}</div>constlist1=<divstyle={{width:'100px'}}>{name}</div>2、一个元素只能有一个跟标签,不想使用额外标签可用<><......
  • JointJS+ Plus 4.0.1 Crack Update FIX
    JointJS+,专业的交互式UI图表库一个用于高级可视化应用程序的图表库,它融合了HTML5和SVG的最佳功能,并提供了创建优秀产品所需的一切。一个库,无限的UI选项JointJS+Plus 直接在您的应用程序中使用交互式流程图、BPMN和其他图表工作室。利用我们的模板应用程序,将开发......
  • Json 序列化、反序列化;重复或循环使用时注意事项
    Json序列化问题publicclassTest2{publicstaticvoidmain(String[]args)throwsJsonProcessingException{ObjectMapperobjectMapper=newObjectMapper();objectMapper.setSerializationInclusion(JsonInclude.Include.NON_NULL);Plug......
  • Node.js REPL ( 交互式解释器 )
    Node.js的REPL(Read-Eval-PrintLoop)是一个交互式的JavaScript解释器,它允许开发者在命令行环境中输入JavaScript代码并立即看到结果。REPL是一个非常有用的工具,可用于快速测试代码片段、调试代码或学习JavaScript语言的新特性。启动REPL要在Node.js中启动......
  • Node.js NPM 使用介绍
    NodePackageManager(npm)是Node.js的官方包管理器,它允许开发者安装、发布和管理Node.js应用程序的依赖项。npm是随Node.js一起安装的,因此一旦你安装了Node.js,你就有了npm。下面是一个关于如何使用npm的基本介绍,包括安装包、创建项目、管理依赖以及发布包等......