vue项目中点击实现数据复制效果

给用户提供最为便利和高效的体验，由此，为同行们提供清晰便利的操作步骤于源码；

废话不多说---上步骤：

第一步：内行都懂哈：先下载插件啦

npm install --save vue-clipboard2 

第二步：项目中man中引入并挂载

第三步：就是到我们此需求得页面中进行使用：

<template>
  <div class="container">
    <div id="target">
      {{ list }}
    </div>
    <button type="button" @click="copy">复制</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: "赵同同",
    };
  },
  methods: {
    copy() {
      //  let text=document.getElementById('target').innerText;  //获取div中的数据进行复制
      let text = this.list; //拿到data中的list数据进行复制
      this.$copyText(text).then(
        (e) => {
          console.log(e);
          this.$message({
            showClose: true,
            message: "恭喜你, 获取成功",
            type: "success",
          });
        },
        (e) => {
          console.log(e);
          this.$message({
            showClose: true,
            message: "错了哦，获取失败",
            type: "error",
          });
        }
      );
    },
  },
};
</script>

 

原生依赖浏览器复制进行实现：   

       不足：兼容性不是怎么好，有些浏览器是不支持的---推荐使用上面插件形式进行实现。

<template>
  <div class="container">
    <div id="target">
      {{ list }}
    </div>
    <button type="button" @click="copyText">复制</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: "赵同同",
    };
  },
  methods: {
    copyText() {
      //  let text=document.getElementById('target').innerText;  //获取div中的数据进行复制
      let text=this.list;  //拿到data中的list数据
      let inputElement = document.createElement("input"); //模拟输入框
      inputElement.value = text;  //将需要获取得值赋给我们模拟得输入框
      document.body.appendChild(inputElement); //appendChild追加
      inputElement.select(); //选中文本
      document.execCommand("copy"); //执行浏览器得复制命令copy
      inputElement.remove();  //清楚模拟的输入框  / 由此释放内存
      this.$message({  //提示
        showClose: true,
        message: "恭喜你, 复制成功",
        type: "success",
      });
    },
  },
};
</script>

最后实现效果奉上：

结果至上