vue3一键复制功能

在utils文件夹下建立useCopyToClipboard.js

useCopyToClipboard.js的内容如下

1.  
   export function useCopyToClipboard(val) {
2.  
     let isSuccessRef = false;
3.  
    
4.  
     //创建input标签
5.  
     var input = document.createElement("input");
6.  
     //将input的值设置为需要复制的内容
7.  
     input.value = val;
8.  
     //添加input标签
9.  
     document.body.appendChild(input);
10.  
      //选中input标签
11.  
      input.select();
12.  
      //执行复制
13.  
      document.execCommand("copy");
14.  
      if (document.execCommand("copy")) {
15.  
        isSuccessRef = true;
16.  
      } else {
17.  
        isSuccessRef = false;
18.  
      }
19.  
      //移除input标签
20.  
      document.body.removeChild(input);
21.  
     
22.  
      return { isSuccessRef };
23.  
    }

然后在你要用的文件里面引入

import {useCopyToClipboard} from "@/utils/useCopyToClipboard.js"

我这块拿经纬度做例子 因为项目中的是一键复制经纬度

1.  
   const strickyValue=ref()
2.  
   //offsetLongitude和offsetLatitude就是你要复制的内容
3.  
   strickyValue.value= offsetLongitude.value "," offsetLatitude.value;

然后html是这样的

1.  
   <input type="text" id="lnglat" v-model="textClick"/>
2.  
   <button type="button" @click="handleCopyText(strickyValue)">一键复制</button>

input框的经纬度是怎么来的？代码如下！

 document.getElementById("lnglat").value =offsetLongitude.value   ","   offsetLatitude.value;

 点击事件的代码如下啊 别忘记传参

button按钮的type一定要设置成button啊   因为默认是type=“submit” 要是默认的话点击button会出现刷新页面的情况！！！！！！切记 type=“button”

1.  
   function handleCopyText(val){
2.  
   let {isSuccessRef}=useCopyToClipboard(val)
3.  
   if(isSuccessRef){
4.  
   proxy.$modal.msgSuccess("复制成功");
5.  
   }else{
6.  
   proxy.$modal.msgError("复制失败");
7.  
   }
8.  
   }

写的是vue3 用的是语法糖啊 用的是语法糖啊！！！看完记得点个赞哦！！！木啊木啊木啊~~~

这篇好文章是转载于：学新通技术网