1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue-clipboard2:实现复制内容到剪切板

vue-clipboard2:实现复制内容到剪切板

时间:2024-01-15 14:17:08

相关推荐

vue-clipboard2:实现复制内容到剪切板

1、vue-clipboard2的介绍

vue-clipboard2是前端能够调用剪切板的一个插件,可以实现复制内容到剪切板。

npm地址:vue-clipboard2 - npm

github地址:/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><input type="text" v-model="message"><!-- copy内填写属性名 --><button type="button"v-clipboard:copy="message"v-clipboard:success="firstCopySuccess"v-clipboard:error="firstCopyError">复制</button></template>

对应的事件方法

<script>export default {data() {return {message: "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>

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

对应的源代码块 操作

<button @click="copyData">第二种方式复制</button>

对应的事件方法

methods: {copyData(){//如果不需要回调:this.$copyText(this.message)//如果需要回调:this.$copyText(this.message).then( e => {alert('复制成功')console.log(e)}, function (e) {alert('复制失败')console.log(e)})}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。