vue3一键复制功能
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 用的是语法糖啊 用的是语法糖啊!!!看完记得点个赞哦!!!木啊木啊木啊~~~
更多推荐
已为社区贡献2条内容
所有评论(0)