vue-clipboard2的使用

摘要:
文章目录1.vue剪贴板简介2.vue剪贴板的安装2.使用3.1。第一种方法使用3.2。第二种方法使用1.vue clipboard2介绍vue clibboard2是一个插件,前端可以调用剪贴板。对应的源代码块操作第二个方法复制事件方法SeccendCopy(){this.$copyText.then(function(e){console.log(“copyarguments:”,e);alert(“复制成功!

文章目录

1、vue-clipboard2介绍

vue-clipboard2是前端能够调用剪切板的一个插件。具体的描述官网上也有具体的说明,
npm地址https://www.npmjs.com/package/vue-clipboard2
github地址https://github.com/Inndy/vue-clipboard2

2、vue-clipboard2安装
npm install --save vue-clipboard2
3、使用
  • 使用前进行注册
import Vue from 'vue'

import VueClipBoard from 'vue-clipboard2'

Vue.use(VueClipBoard);

3.1 第一种方法使用

使用指令的方式进行绑定
<template>
<div>
    <div>
      <textarea name="复制内容" id cols="30" rows="10" v-model="value"></textarea>
      <button
        v-clipboard:copy="value"
        v-clipboard:success="firstCopySuccess"
        v-clipboard:error="firstCopyError"
      >第一种方式复制</button>   
    </div>
    <div>
      <textarea name="粘贴内容" id cols="30" rows="10"></textarea>
    </div>
  </div>
</template>  
  • 对应的事件方法
<script>
export default {
  data() {
    return {
      value: "A simple vuejs 2 binding for clipboard.js!"
    };
  },
  methods: {
    firstCopySuccess(e) {
      console.log("copy arguments e:", e);
      alert("复制成功!");
    },
    firstCopyError(e) {
      console.log("copy arguments e:", e);
      alert("复制失败!");
    }
  }
};
</script>
  • 事件参数e
    事件参数e

3.2 第二种方法使用

第二种方法使用this.$copyText()方法进行复制。

  • 对应的源代码块
    源代码
  • 操作
<button @click="seccendCopy">第二种方式复制</button>
  • 对应的事件方法
seccendCopy() {
      this.$copyText(this.value).then(
        function(e) {
          console.log("copy arguments e:", e);
          alert("复制成功!");
        },
        function(e) {
          console.log("copy arguments e:", e);
          alert("复制失败!");
        }
      );
}

免责声明:文章转载自《vue-clipboard2的使用》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇HTTP 1.1 中TransferEncoding chunked编码 | haohtml's blog第三课:部署Coredns服务下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

Linux查看机器和硬盘的SN

查看硬件RAID中硬盘的SN#sas端口:[root@~]$smartctl-a/dev/sda dmegaraid,n***序列号:6RJ974SR***#sat端口[root@~]$smarttl-a/dev/sda-dsat+megaraid,n***序列号:6BRJ974SR***查看机器SN[root@~~]$dmidcode-t1**序列号...

MySQL锁详解

MySQL锁详解update语句执行流程MySQL的锁介绍按照锁的粒度来说,MySQL主要包含三种类型(级别)的锁定机制:全局锁:锁的是整个database。由MySQL的SQLlayer层实现的表级锁:锁的是某个table。由MySQL的SQLlayer层实现的行级锁:锁的是某行数据,也可能锁定行之间的间隙。...

IOS崩溃日志解析(crash log)

IOS的应用程序少不了crash,互联网统计分析工具友盟有一项目错误分析的功能,专门用于应用程序崩溃日志统计,最近研究友盟上统计到的崩溃日志,在此对崩溃日志做一个简单的总结。否则,应用将被iOS终止,并产生低内存崩溃报告。这样,我们去我们的dSYM文件看看我们的UUID是否和崩溃日志上的UUID一致,只有dSYM文件的UUID和崩溃日志上的UUID一致,我们...

【工具技巧】:sublime notepad++ 多行编辑

将光标定位到一行-˃ctrl+shift+↑↓, 上下移动一行。选择-˃ctrl+shift后+↑↓, 上下移动所选区域。再次按6:Ctrl+Shift+Enter在光标前插入一行。...

allure报告实现保存失败用例截图功能

allure中可以保存日志信息和截图日志allure能够自动识别。截图需要自己在添加allure方法。...

DB2字符函数简介及使用

Param2可以是编码单元16-16位UTF-16编码,也就是说,字符串表示为16位UTF-18编码字符串。Codeunits32-32位UTF-32编码,即字符串表示为32位UTF 32编码字符串。请注意,定义为FORBITDATA的字符串不能转换为图形字符。如果length<length,则来自的原始字符串短于结果中的长度。...