vue3一键复制功能
在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 用的是语法糖啊 用的是语法糖啊!!!看完记得点个赞哦!!!木啊木啊木啊~~~
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfabjc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01