(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; };
复制代码

 

posted @   双手插在裤兜谁也不爱  阅读(238)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示