vue input button 点击复制内容

首先是关于input框里面的复制

1、html里面的代码

 <input type="text" :value="item.tkl" :id="item.tkl"  title="点击复制这句话" @click="Copy(item.tkl)" >

2、点击js,代码(vue methods)

  Copy(tkl){
        var e = document.getElementById(tkl) // 根据id 获取元素
        e.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        
        this.$message({   // 这里提示语
          message: "链接已复制成功",
          type: 'warning'
        });
      },

首先是关于button 点击复制某一链接

1、html里面的代码

  <button class="btnimg2" @click="Copytgjllj"></button>

2、点击js,代码(vue )

data(){
return{
hd3href :'http:djfdkjslf'  // 某一链接
}
},
methods:{

  const input = document.createElement('input');  // 这里的逻辑就是新建立一个input标签,
          document.body.appendChild(input); // 把input添加到body中
          input.setAttribute('value',this.hd3href); // 设置input的value值,this.hd3href 
          input.select();  									// select 选中input里面的所有文本内容
          document.execCommand("Copy"); // 执行浏览器复制命令
          
          this.$message({  								  // 提示消息
            message: "链接已复制成功",
            type: 'success'
          });
          document.body.removeChild(input);   // 最近需要销毁
          }

          }
发布了26 篇原创文章 · 获赞 29 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_44143512/article/details/97392193