vue 复制文本

我有一粒花生米

于 2021-10-10 17:17:40 发布

阅读量244

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44286765/article/details/120688996

版权

这段代码展示了如何在JavaScript中创建一个输入元素，将数据赋值给输入框，选中文本并执行复制操作，最后清理输入框。这个功能常用于网页中的复制订单号或者其他关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@click="copyOrderNumber(message.dz)"
copyOrderNumber(OrderNumber) {
      //调用copy函数
      if(OrderNumber){
        this.copy(OrderNumber);
      }
    },
    copy(data) {
      // 存储传递过来的数据
      let OrderNumber = data;
      // 创建一个input 元素
      // createElement() 方法通过指定名称创建一个元素
      let newInput = document.createElement("input");
      // 讲存储的数据赋值给input的value值
      newInput.value = OrderNumber;
      // appendChild() 方法向节点添加最后一个子节点。
      document.body.appendChild(newInput);
      // 选中input元素中的文本
      // select() 方法用于选择该元素中的文本。
      newInput.select();
      // 执行浏览器复制命令
      //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
      document.execCommand("Copy");
      // 清空输入框
      newInput.remove();
      // 下面是element的弹窗 不需要的自行删除就好
	    this.$message({
           type: 'success',
           message: '复制成功'
          });  
  	  },