Vue 实现复制到粘贴板功能
vue 实现复制到粘贴板功能需要依赖到 clipboard.js
1、 首先需要安装依赖 * 出现错误的话，可以试试 cnpm
npm install --save vue-clipboard2npm install --save vue-clipboard2
2、 安装成功之后就可以开始使用了
对于vue-cli
import Vue from vue import VueClipboard from vue-clipboard2import Vue from vue import VueClipboard from vue-clipboard2
对于常规的用法
<script src="vue.min.js"></script> <!-- 必须在vue.js之后放置这一行 --> <script src="vue-clipboard.min.js"></script>
3、 Dome的使用：
<template>
<div class="wxsmallcode-page publicCon">
<div class="copyBox">
sysAppId：<span>{
{sysAppIds}}</span>
<el-button class="ml10" type="text" size="medium"
v-clipboard:copy="sysAppIds"
v-clipboard:success="onCopy"
v-clipboard:error="onError">点击复制</el-button>
</div>
</template>
sysAppId：
{ {sysAppIds}}
点击复制
<script>
export default {
data(){
return {
sysAppIds: xxxxxxxxxxxsx
}
},
methods: {
// 复制成功
onCopy(e){
console.log(e);
},
// 复制失败
onError(e){
alert("失败");
},
}
}
</script>
注：cnpm 为安装了淘宝镜像之后的命令工具
上一篇：
IDEA上Java项目控制台中文乱码