转化成二维码的字符串

57 阅读1分钟
<template>    <div>        <div class="container">        <input type="text" placeholder="请输入您想转化成二维码的字符串" id="input" />        <button @click="creatQRcode">一键生成</button>        <div id="qrcode"></div>    </div>    </div></template><!--     <script src="https://zxpsuper.github.io/Demo/qrcode/qrcode-dev.js"></script> --><script setup>    let qrcode = null;    function creatQRcode() {        document.getElementById("qrcode").innerHTML = "";        // 设置要生成二维码的链接        // qrcode = new QRCode(document.getElementById("qrcode"), "http://www.baidu.com");          // 设置要生成二维码的样式        qrcode = new QRCode(document.getElementById("qrcode"), {            text: document.getElementById("input").value,            width: 200,            height: 200,            colorDark: "#000000",            colorLight: "#ffffff",            correctLevel: QRCode.CorrectLevel.H        });    }</script><style lang="scss" scoped>   .container {            padding: 60px;            margin: 0 auto;            line-height: 50px;        }        input {            display: inline-block;            width: 200px;            height: 32px;            line-height: 1.5;            padding: 4px 7px;            font-size: 12px;            border: 1px solid #dcdee2;            border-radius: 4px;            color: #515a6e;            background-color: #fff;            background-image: none;            position: relative;            cursor: text;            transition: border 0.2s ease-in-out, background 0.2s ease-in-out,                box-shadow 0.2s ease-in-out;        }        button {            color: #fff;            background-color: #19be6b;            border-color: #19be6b;            outline: 0;            vertical-align: middle;            line-height: 1.5;            display: inline-block;            font-weight: 400;            text-align: center;            -ms-touch-action: manipulation;            touch-action: manipulation;            cursor: pointer;            background-image: none;            border: 1px solid transparent;            white-space: nowrap;            -webkit-user-select: none;            -moz-user-select: none;            -ms-user-select: none;            user-select: none;            padding: 5px 15px 6px;            font-size: 12px;            border-radius: 4px;            transition: color 0.2s linear, background-color 0.2s linear,                border 0.2s linear, box-shadow 0.2s linear;        }        #qrcode {            margin-top: 20px;        }</style>