一、需求說明
在項目中 點擊按鈕 復制 某行文本是很常見的 應(yīng)用場景，

在 Vue 項目中實現(xiàn) 復制功能 需要借助 vue-clipboard2 插件。

二、代碼實現(xiàn)
1、安裝 vue-clipboard2 依賴
（ 出現(xiàn)錯誤的話，可以試試切換成淘寶鏡像源

npm config set registry https://registry.npm.taobao.org ）

npm install --save vue-clipboard2

2、在 main.js 文件中全局引入插件
示例代碼如下：

import Vue from 'vue'
import VueClipBoard from 'vue-clipboard2'
?
Vue.use(VueClipBoard)
?
new Vue({
? render: h => h(App)
}).$mount('#app')

3、案例

在組件中有兩種方法可以實現(xiàn)復制功能。

方法一?：

使用?vue-clipboard2?提供的 指令

直接將變量內(nèi)容復制至剪切板，暫時沒有找到處理數(shù)據(jù)后再復制的方式

<template>
? <div class="yeluosen">
? ? <input type="text" v-model="message">
? ? <el-button?
? ? ? icon="el-icon-share"?
? ? ? size="mini"?
? ? ? style="font-size: 16px;padding: 4px 8px;"?
? ? ? title="共享"?
? ? ? v-clipboard:copy="scope.row.url"?
? ? ? v-clipboard:success="onCopy"?
? ? ? v-clipboard:error="onError"?
? ? ? @click="share(scope.row.url)"></el-button>
? </div>
</template>

復制時，通過 v-clipboard: copy 復制輸入的內(nèi)容 ：

// 復制成功 or 失敗（提示信息！！！）
onCopy: function (e) {
? console.log('復制成功！', e)
},
onError: function (e) {
? console.log('復制失敗！', e)
}

方法二：
使用?vue-clipboard2?全局綁定的?$copyText?事件方法

復制動作使用的是 Vue?響應(yīng)函數(shù)方式，這就為復制前控制數(shù)據(jù)提供了可能！

// 點擊事件
share(val) {
? this.handleData(val)
? this.$copyText(this.message).then(function (e) {
? ? alert('Copied')
? }, function (e) {
? ? alert('Can not copy')
? })
},
?
// 數(shù)據(jù)處理
handleData(val){
? this.message = this.message + ' ' + val
}

<template>
? <div>
? ? <el-button
? ? ? type="success"
? ? ? size="small"
? ? ? style="margin-left: 10px"
? ? ? @click="onCopy"
? ? ? >復制</el-button
? ? >
? </div>
</template>
?
<script>
export default {
? data() {
? ? return {
? ? ? text: "這是一段復制的文本",
? ? };
? },
? methods: {
? ? onCopy() {
? ? ? this.$copyText(this.pathText).then(
?? ? ? ? ?e=>{
?? ? ? ? ? ?console.log('復制成功：', e);
?? ? ? ? ?},
?? ? ? ? ?e=>{
?? ? ? ? ? ?console.log('復制失敗：', e);
?? ? ? ? ?}
? ? ? )
? ? }
? }
};
</script>

三、項目所用

實現(xiàn)選中并且復制成功后帶有提示信息的效果 ：

<template>
? <div>
? ? <el-input ref="addressInput" v-model="address" :readonly="true">
? ? ? <template slot="prepend"> 反饋地址 </template>
? ? </el-input>
? ? <el-button @click="copyLink(address)">復制鏈接</el-button>
? </div>
</template>
?
<script>
export default {
? data() {
? ? return {
? ? ? address: "https://www.baidu.com/", // 地址信息
? ? };
? },
? methods: {
? ? // 判斷是否是 IE 瀏覽器
? ? isIE() {
? ? ? if (window.ActiveXObject || "ActiveXObject" in window) {
? ? ? ? return true;
? ? ? } else {
? ? ? ? return false;
? ? ? }
? ? },
? ? // 拷貝地址
? ? copyLink(url) {
? ? ? if (this.isIE()) {
? ? ? ? this.$copyText(url);
? ? ? ? this.$refs.addressInput.select(); // 實現(xiàn)選中效果
? ? ? ? this.$message.success("復制成功!");
? ? ? } else {
? ? ? ? this.$copyText(url)
? ? ? ? ? .then((res) => {
? ? ? ? ? ? this.$refs.addressInput.select(); // 實現(xiàn)選中效果
? ? ? ? ? ? this.$message.success("復制成功!");
? ? ? ? ? })
? ? ? ? ? .catch((err) => {
? ? ? ? ? ? this.$message.error("該瀏覽器不支持自動復制, 請手動復制");
? ? ? ? ? });
? ? ? }
? ? },
? },
};
</script>
?
<style lang="scss" scoped></style>

優(yōu)化一下，我想要復制一個對象，需要做轉(zhuǎn)義，像這樣

<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"><span slot="footer" class="dialog-footer"><span>{{ form.address }}</span><span>{{ form.name }}</span><span>{{ form.password }}</span><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">確 定</el-button><el-button type="primary" @click="share(form)">復制</el-button></span></el-dialog>

data(){
return{form: {address: "https://www.baidu.com/", // 地址信息name: "張三",password: "123",},
}
}

 share(url) {if (this.isIE()) {this.$copyText(this.form.password);// this.$refs.addressInput.select(); // 實現(xiàn)選中效果this.$message.success("復制成功!");} else {//此處做轉(zhuǎn)義，并且使用JSON.stringify轉(zhuǎn)一下let obj = {'地址': this.form.address,'用戶名': this.form.name,'密碼': this.form.password}const objectString = JSON.stringify(obj);this.$copyText(objectString).then((res) => {// this.$refs.addressInput.select(); // 實現(xiàn)選中效果this.$message.success("復制成功!");}).catch((err) => {this.$message.error("該瀏覽器不支持自動復制, 請手動復制");})}},

最終結(jié)果為{"地址":"https://www.baidu.com/","用戶名":"張三","密碼":"123"}，，win+v剪貼板上也會存在