在utils文件夹下建立useCopyToClipboard.js

useCopyToClipboard.js的内容如下

export function useCopyToClipboard(val) {
      let isSuccessRef = false;
    
      //创建input标签
      var input = document.createElement("input");
      //将input的值设置为需要复制的内容
      input.value = val;
      //添加input标签
      document.body.appendChild(input);
      //选中input标签
      input.select();
      //执行复制
      document.execCommand("copy");
      if (document.execCommand("copy")) {
        isSuccessRef = true;
      } else {
        isSuccessRef = false;
      }
      //移除input标签
      document.body.removeChild(input);
    
      return { isSuccessRef };
    }
    

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

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

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

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

然后html是这样的

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

input框的经纬度是怎么来的?代码如下!

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

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

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

function handleCopyText(val){
  let {isSuccessRef}=useCopyToClipboard(val)
  if(isSuccessRef){
    proxy.$modal.msgSuccess("复制成功");
  }else{
    proxy.$modal.msgError("复制失败");
  }
}

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐