每日一练23：二维码的实现

最新推荐文章于 2024-03-29 14:48:36 发布

那是遇知吧

最新推荐文章于 2024-03-29 14:48:36 发布

阅读量315

点赞数

分类专栏：每日一練 javascript插件库 VUE.js

本文链接：https://blog.csdn.net/weixin_41406727/article/details/109206484

版权

VUE.js 同时被 3 个专栏收录

40 篇文章 1 订阅

订阅专栏

每日一練

28 篇文章 0 订阅

订阅专栏

javascript插件库

11 篇文章 0 订阅

订阅专栏

第一种写法

参考：qrcode、Vue使用QRCode插件，生成二维码

npm i qrcode --save

<template>
  <div id="qrCode">
    <div id="code"></div>
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>
import QRCode from "qrcode";
export default {
  data() {
    return {
      msg: "hello vue",
      codes: "",
    };
  },

  components: {
    QRCode: QRCode,
  },

  methods: {
    useqrcode() {
      var canvas = document.getElementById("canvas");
      QRCode.toCanvas(canvas, "https://mp.csdn.net/console/article", function (
        error
      ) {
        if (error) console.error(error);
        console.log("QRCode success!");
      });
    },
  },

  mounted() {
    this.useqrcode();
  },
};
</script>

第二种写法

参考：前端动态生成二维码 jquery.qrcode.min.js、Jquery版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="qrcode">
    </div>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script src="../qrcode/jquery.qrcode.min.js"></script>
<script>
    $("#qrcode").qrcode({
    render: "canvas", // 渲染方式有table方式和canvas方式
    width: 256,   //默认宽度
    height: 256, //默认高度
    text: "https://www.npmjs.com/package/qs", //二维码内容
    typeNumber: -1,   //计算模式一般默认为-1
    correctLevel: 2, //二维码纠错级别
    background: "#ffffff",  //背景颜色
    foreground: "#000000"  //二维码颜色
});
</script>
</html>

那是遇知吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每日一练23：二维码的实现

第一种写法qrcodenpm i qrcode --save<template> <div id="qrCode"> <div id="code"></div> <canvas id="canvas"></canvas> </div></template><script>import QRCode from "qrcode";export defa
复制链接

扫一扫

专栏目录