一:复制链接
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;
};