博主
258
258
258
258
专辑

第三十三节 vue实现点击复制文本

亮子 2022-08-05 10:40:45 963 0 0 0

1、方法一

(1)html脚本

 <button @click="copyWx(wx)" size="medium" type="primary" plain>复制微信号</button>

(2)js脚本

export default {
    components:{},
    data(){
        return{
            wx:"k369312"
        }
    },
    methods:{
        copyWx(item) {
        // 模拟 输入框
        var cInput = document.createElement("input");
        cInput.value = item;
        document.body.appendChild(cInput);
        cInput.select(); // 选取文本框内容

        // 执行浏览器复制命令
        // 复制命令会将当前选中的内容复制到剪切板中(这里就是创建的input标签)
        // Input要在正常的编辑状态下原生复制方法才会生效

        document.execCommand("copy");

        this.$message({
            type: "success",
            message: "微信号复制成功"
        });
        // 复制成功后再将构造的标签 移除
        document.body.removeChild(cInput);
        }
    }
}

方法二

(1)引入clipboard.js

  • 通过npm安装:npm install clipboard –save
  • 通过通过引入源文件:下载地址
<script src="js/clipboard.min.js"></script>

(2)在需要使用的组件里import

import Clipboard from 'clipboard'

(3)使用和方法

<span class="tag-read" data-clipboard-text="我是点击复制的内容" @click="copy">我是点击复制的内容</span>
copy () {
      var clipboard = new Clipboard('.tag-read')
      clipboard.on('success', e => {
          console.log('复制成功')
          //  释放内存
        clipboard.destroy()
      })
        clipboard.on('error', e =>{
        // 不支持复制
        console.log('该浏览器不支持复制')
        // 释放内存
        clipboard.destroy()
      })
    },