VUE 使用插件vue-clipboard2复制内容至剪切板(两种使用方法)

安装

npm install --save vue-clipboard2

main.js

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)

方式一

<template><div class="container"><input type="text" v-model="message"><button class="fs12"v-clipboard:copy="'地址：'+detail.address+'\n姓名：'+detail.name+'\n电话：'+detail.phone"v-clipboard:success="onCopy" v-clipboard:error="onError">复制</button></div>
</template>
<script>export default {data() {return {detail:{address:'地址',name:'名字',phone:'1234567'}}},methods: {onCopy: function (e) {alert('You just copied: ' + e.text)},onError: function (e) {console.log(e)alert('Failed to copy texts')}}}
</script>

方式二

<template><div class="container"><button class="fs12" @click="copyCode">复制</button></div>
</template>
<script>export default {data() {return {detail:{address:'地址',name:'名字',phone:'1234567'}}},methods: {copyCode() {this.$copyText(`地址：${this.detail.address}\n收件人： ${this.detail.name}\n电话：${this.detail.phone}`).then(res => {console.log(res)this.$toast("已成功复制，可直接去粘贴");},err => {this.$toast("复制失败");} )}}}
</script>

API

https://www.npmjs.com/package/vue-clipboard2

VUE 使用插件vue-clipboard2复制内容至剪切板(两种使用方法)相关推荐

js禁止右键,禁止复制,复制内容到剪切板
有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...
html 文本标签点击复制,点击复制-点击div或者p标签复制内容到剪切板
点击复制-点击div或者p标签复制内容到剪切板最近在做一个需求,就是需要点击div或者p标签需要复制其中的内容到剪切板中,可以快速的粘贴如图下所示: 1059788-201709041517163 ...
android 复制内容到剪切板方法
/*** 复制内容到剪切板** @param copyStr* @return*/ private boolean copyStr(String copyStr) {try {//获取剪贴板管理器Cl ...
Android复制内容到剪切板上
Android复制内容到剪切板上 fun Context.copyToClipboard(label: String, data: String) {getSystemService<Clipb ...
JavaScript复制内容到剪切板
复制内容到剪切板分两种情况,一种是从页面已有的可选元素中选中内容进行复制,一种是将Javascript代码中的字符串直接复制到剪切板. 复制页面元素选中内容 html代码: <input typ ...
html文件打开系统错误,win7打开word提示“无法打开文件Normal因为内容有错误”的两种解决方法...
win7系统打开Word的时候,弹出提示"无法打开文件Normal.dotm,因为内容有错误",为什么会出现错误提示呢?小编就按照错误提示寻找文件,最后发现是Word自动生成的模板 ...
h5页面调用用户手机打电话功能以及复制内容到剪切板
通过配合vant的面板组件实现该功能: 在index.html中添加meta标签:<meta name="format-detection" content="te ...
js调用浏览器的复制功能复制内容到剪切板
js调用浏览器的复制功能: 浏览器自带复制粘贴功能,通过js调用浏览器的复制功能实现复制文本内容到剪切板浏览器复制命令:document.execCommand('Copy') 具体代码实现: // ...
在浏览器中实现复制内容到剪切板中
前言前端开发时, 经常有这种功能, 需要把网页中的有些内容复制到剪切板中. 针对IE浏览器来说, 实现起来就很简单, 因为直接有clipboardData 的对象可以使用, 但是对于其他浏览器来说, ...

VUE 使用插件vue-clipboard2复制内容至剪切板(两种使用方法)

安装

main.js

方式一

方式二

API

VUE 使用插件vue-clipboard2复制内容至剪切板(两种使用方法)相关推荐

最新文章

热门文章