一、使用插件 v-clipboard

1.安装依赖

npm install --save v-clipboard

2.引入 main.js

import Vue from 'vue'
import Clipboard from 'v-clipboard'
Vue.use(Clipboard)

3.使用 index.vue

<template><button v-clipboard="value"v-clipboard:success="Success" v-clipboard:error="Error">  </button>
</template>export default {data() {return {value:'一键复制'}},methods: {// 成功回调Success ({ value, event }){console.log('success', value);this.$message.success("已复制");},// 失败回调Error ({ value, event }) {console.log('error', value)this.$message.error("复制失败");}}}

二、js实现复制功能

1. script

 <template><div><el-table :data="tableList"><el-table-column fixed prop="name" label="名称" ><template #default="scope"><el-button type="text" @click="copyInput(scope.row.name)" /><el-button type="text" @click="copyName" /></template></el-table-column></el-table></div></template>  <script>data() {return {tableList: [{name:'花花'}],};},methods: {copyInput(data) {// 创建一个新的 div 元素let input = document.createElement("input");input.value = data;// 添加文本节点 到这个新的 div 元素document.body.appendChild(input);// 选择对象input.select(); // 执行浏览器复制命令document.execCommand("Copy");// 复制成功$message({message: "已复制：" + data,type: "success",});// 删除文本节点 从这个新的 div 元素document.body.removeChild(input);},// 复制姓名copyName() {setTimeout(() => {this.copyInput(this.tableList[0].name);}, 100);},}</script>

vue 一键复制粘贴相关推荐

vue 一键复制粘贴文字功能
1/下载 clipboard 依赖 npm install clipboard --save 2/在功能页面写如下代码 <template><div style="marg ...
JS一键复制粘贴功能
使用clipboard.js 实现: 它是一个不需要Flash,就能实现文本复制或者剪切到剪切板的轻量级插件: 具体实例: 可以使用cdn 或者直接下载设置好引用路径. <!DOCTYPE h ...
Android实现一键复制粘贴，兼容低版本系统（api 11以下）
Android实现一键复制粘贴,兼容低版本系统(api11以下) /** * 实现文本复制功能 * @param content * @return t ...
js实现粘贴板js插件clipboard.js实现一键复制粘贴功能
js实现粘贴板js插件clipboard.js实现一键复制粘贴功能简介下载引入插件使用一个节点的复制多个节点的复制剪切文本框复制输入框简介 clipboard.js 提供了一种更好. ...
Ctrl c 复制html,一键复制粘贴(用热键代替Ctrl+X、Ctrl+C、Ctrl+V)
在用电脑的时候大家少不了使用ctrl+c和ctrl+v键,也就是复制和粘贴快捷键,本次小编发布的这个一键复制粘贴工具可实现连续复制,顺序粘贴,帮您轻松完成繁琐的文字复制工作,也就是用热键代替Ctrl+ ...
一键复制粘贴工具使用教程
一键复制粘贴工具打开左键复制选项功能1:选中即完成复制.灭掉"ctrl+c". 功能2:右键双击粘贴,左手脱离键盘,吃零食接电话工作两不误. 软件链接: 链接:https:// ...
layui教程,非常全,常用代码一键复制粘贴
layui的常用代码可以一键复制粘贴一键复制layui代码的网址,点击此处调整网址地址:http://www.shagua.wiki/project/3?p=84 点击按钮,直接复制按钮的代码
快速回复信息神器哪些支持一键复制粘贴回复
很多快速回复信息的神器和客户聊天的窗口分属两个平台,在进行快速回复信息时,需要先筛选到快速回复的信息,然后进行复制粘贴后才可以,这样的操作过程是比较复杂的.很多人在进行信息回复时,想找一些可以快速复制 ...
电脑上使用的一键复制粘贴工具哪些操作便捷?
选择一键复制粘贴工具,很多人都想选择一些操作比较便捷的,这样在工作中不会占用很多的工作时间,同时还能很好的起到提醒的作用.那么,电脑上使用的一键复制粘贴工具哪些操作比较便捷呢? 赛效一键复制工具是一款 ...

vue 一键复制粘贴

一、使用插件 v-clipboard

1.安装依赖

2.引入 main.js

3.使用 index.vue

二、js实现复制功能

vue 一键复制粘贴相关推荐

最新文章

热门文章