vue中复制功能

vue中复制功能

不使用插件

可以使用 input标签 ，然后通过execCommand(‘copy’)函数实现复制功能

复制标签中内容实现

<template>
  <div id="app">
    输入需要复制的内容：<input id="copy" v-model="crj"/>
   <button v-on:click="copy()">复制</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      crj: ''
    }
  },
  methods: {
    copy () {
      var input = document.getElementById('copy')
      input.select() // 选中input标签
      document.execCommand('copy') // 执行复制
      this.$message.success('success!')
    },
  },
}
</script>

复制非标签中内容实现

<template>
  <div>
   <button id="copy" v-on:click="copy()">复制</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      crj: '需要复制的内容！'
    }
  },
  methods: {
    copy () {
      var input = document.createElement('input') // 创建input标签
      input.value = this.crj; // 将input的值设置为需要复制的内容
      document.body.appendChild(input) // 添加input标签
      input.select()  // 选中input标签
      document.execCommand('copy') // 执行复制
      this.$message.success('success!') // 成功提示信息
      document.body.removeChild(input) // 移除input标签
    },
  },
}
</script>

使用插件（Clipboard）

安装Clipboard插件

npm install clipboard --save

导入插件

//全局导入，在main.js中导入（可选）
import clipboard from ‘clipboard’
Vue.prototype.clipboard = clipboard

//局部导入，在对应文件导入
import clipboard from ‘clipboard’

使用

<template>
    <div class="contentViews" style="text-align: left;">
        <div class="copy">
            <h4>单个文本进行复制</h4>
            <!-- 简单用法 -->
            <div class="one">
                <p id="foo1">{{ copyText }}</p>
                <!--复制按钮 -->
                <el-button id="btn" size="mini" type="primary" data-clipboard-action="copy" data-clipboard-target="#foo1"
                    @click="copyFun">复制</el-button>
            </div>
            <!-- 高阶用法 -->
            <h4>多个文本进行复制</h4>
            <div class="list">
                <div class="item" v-for="(item, index) in copyTextList" :key="index">
                    <p :id="item.textId">{{ item.text }}</p>
                    <!--复制按钮 -->
                    <el-button id="btn" type="primary" size="mini" data-clipboard-action="copy"
                        :data-clipboard-target="'#' + item.textId" @click="copyFun">复制</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import DemoMd from '../../md/vue中复制功能.md';
export default {
    data() {
        return {
          // 单行文本的复制
          copyText: '代码是写出来给人看的，附带能在机器上运行',

          // 多行文本进行复制
          copyTextList: [
            {
              textId: 'p1',
              text: '画笔，臣服于我!',
            },
            {
              textId: 'p2',
              text: '欲买桂花同载酒,终不负,少年游!',
            },
            {
              textId: 'p3',
              text: '以此烈火,斩无不断! 烈焰焚尽！',
            },
            {
              textId: 'p4',
              text: '今夜的月色严厉而冰冷，一如寒彻的锋刃，照耀将死之人的面孔！',
            },
          ]
        };
    },
    methods: {
        copyFun() {
            let _this = this
            let clipboard = new Clipboard('#btn'); // 获取点击按钮的元素
            /* 注意此事件监听是异步的   */
            clipboard.on('success', (e) => {
                e.clearSelection();
                // 释放内存
                clipboard.destroy();
                _this.$message.success(`复制成功：${e.text}`)
                // return alert('复制成功：' + e.text);
            });
            // 复制失败
            clipboard.on('error', (e) => {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
                // 释放内存
                clipboard.destroy();
                _this.$message.error('该浏览器不支持自动复制');
            });
        },
    },
};
</script>

使用插件 vue-clipboard2

安装

npm install --save vue-clipboard2

导入插件

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

使用 【指令的方式进行复制】

<template>
<div>
    <div>
      <textarea name="复制内容" id cols="30" rows="10" v-model="copyText"></textarea>
      <button
        v-clipboard:copy="copyText"
        v-clipboard:success="firstCopySuccess"
        v-clipboard:error="firstCopyError"
      >复制</button>   
    </div>
  </div>
</template>  

<script>
export default {
    data() {
        return {
            copyText: 'crj'
        };
    },
    methods: {
        firstCopySuccess(e) {
            console.log("copy arguments e:", e);
            alert("复制成功!");
        },
        firstCopyError(e) {
            console.log("copy arguments e:", e);
            alert("复制失败!");
        }
    }
};
</script>

使用 【this.$copyText()方法进行复制】

<button @click="seccendCopy">复制</button>
<script>
export default {
    data() {
        return {
            copyText: 'crj'
        };
    },
    methods: {
        seccendCopy() {
            this.$copyText(this.copyText).then(
                function (e) {
                    console.log("copy arguments e:", e);
                    alert("复制成功!");
                },
                function (e) {
                    console.log("copy arguments e:", e);
                    alert("复制失败!");
                }
            );
        }
    }
};
</script>