一:复制链接 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; };
标签:const,value,二维码,Vue3.0,复制,oInput,链接 From: https://www.cnblogs.com/wwappb678244233/p/17226160.html