(Vue3.0二维码),复制链接
一:复制链接 1、html部分: <el-dialog v-model="dialogTableVisible" title="分享方式"> <el-row> <el-button class="copy" data-clipboard-text="getUlr" click="copy(getUlr)">复制接龙链接</el-button> </el-row> <br /> <el-row>
<el-button>扫码分享</el-button>
</el-row> </el-dialog> 2、js部分 const getUlr = ref( "http://" + self.location.host + "/Oa/CollectionTable/AddVoteDetail?workid=" + getWorkid.value ); //复制链接 const copy = (data: string) => { let url = data; let oInput = document.createElement("textarea"); oInput.value = url; document.body.appendChild(oInput); oInput.select(); // 选择对象; document.execCommand("Copy"); // 执行浏览器复制命令 oInput.remove(); }; 二:生成、分享二维码 1、生成二维码: vue3 使用 QrCode 生成二维码 第一步:添加 qrcode.vue 组件到项目中 安装命令: npm install --save qrcode.vue # yarn add qrcode.vue
eg: <el-dialog v-model.visible="isdisplay" title="扫一扫二维码"> <el-row label="二维码"> <qrcode-vue :value="getUlr" :size="size" level="H" class="codeqr" /> </el-row> </el-dialog> //扫码分享 const isdisplay = ref(false); //是否显示二维码弹框 let size = ref("400"); //设置二维码大小 const qrcodes = () => { console.log("ggg", getUlr.value); isdisplay.value = true; };
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南