vue复制input框里面的内容

最新推荐文章于 2025-06-04 15:49:38 发布

黛玉葬花也葬你

最新推荐文章于 2025-06-04 15:49:38 发布

阅读量646

点赞数

原文链接：https://blog.youkuaiyun.com/qq_37487141/article/details/84030156?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.baidujs&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edef

版权

本文介绍了一种在Vue.js应用中实现一键复制分享链接的方法。通过创建一个隐藏的输入框并利用DOM操作和execCommand方法，可以方便地让用户复制指定的URL。此方案简单且易于集成。

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

methods: {
    copyShaneUrl(shareLink){
       var input = document.createElement("input");     // 直接构建input
       input.value = shareLink;   // 设置内容
       document.body.appendChild(input);        // 添加临时实例
       input.select();      // 选择实例内容
       document.execCommand("Copy");     // 执行复制
       document.body.removeChild(input);  // 删除临时实例
    }
 }

body中：

<input v-model="axios" />
<button @click="copy">复制</button>

data中：

data：{
	return{
		axios：""
	}
}

methods中

methods: {
    copyShaneUrl(shareLink){
       var input = document.createElement("input");     // 直接构建input  固定
       //引入上面data里面的数据
       input.value = this.axios;   // 设置内容  非固定
       document.body.appendChild(input);        // 添加临时实例
       input.select();      // 选择实例内容
       document.execCommand("Copy");     // 执行复制
       document.body.removeChild(input);  // 删除临时实例
    }
 }