vue h5 实现一键复制文案功能

点击按钮，实现一键复制纯文案的功能，代码如下：

方法一 原生的方法 一般在浏览器上使用

copyUrl() {
      let url = this.codeUrl
      let domInput = document.createElement('input');
      domInput.value = url;
      document.body.appendChild(domInput);  // 添加input节点
      domInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$toast({
        message: `链接复制成功！`,
        duration: 2000
      });
      domInput.remove()
},

方法二 安装插件
PC端 H5端都可以用

npm install clipboard --s

局部引用

import Clipboard from 'clipboard';

 copyUrl() {
      let copy = this.codeUrl  //要复制的链接
      let clipboard = new Clipboard('.copy', {  //绑定需要的触发的dom
        text: function () {
          return copy;
        }
      });
      let _this = this
      clipboard.on('success', function (e) {
        _this.$toast({
          message: `链接复制成功！`,
          duration: 2000
        });
      });
    },

效果图 直接粘贴到想复制的页面