vue 实现一键复制文字

超人不会飞2021

已于 2022-09-05 11:11:51 修改

阅读量474

点赞数

分类专栏： vue JavaScript 文章标签： vue.js javascript 前端

于 2022-09-05 11:11:11 首次发布

本文链接：https://blog.csdn.net/weixin_48585264/article/details/126700973

版权

Vue 复制 JavaScript document.execCommand 一键操作

关键词由CSDN通过智能技术生成

vue 同时被 2 个专栏收录

16 篇文章 2 订阅

订阅专栏

JavaScript

7 篇文章 1 订阅

订阅专栏

  <p ref="num">SF1111000000</p>
  <button @click="toCopy">复制</button>

 data() {
    return {
      copyTxt: '',
    };
  },
  methods: {
    toCopy() {
       this.copyTxt= this.$refs.num.innerText;
       var input = document.createElement("input"); // 直接构建input
       input.value = this.copyTxt; // 设置内容
       console.log(input.value);

       document.body.appendChild(input); // 添加临时实例
       input.select(); // 选择实例内容
       document.execCommand("Copy"); // 执行复制
       document.body.removeChild(input); // 删除临时实例
     },
  }