首页 > 其他分享 >vue项目使用qrcode插件生成二维码

vue项目使用qrcode插件生成二维码

时间:2024-05-27 17:33:49浏览次数:18  
标签:插件 vue qrCodeDiv qrcodejs2 QRCode 二维码 qrcode

下载

npm i qrcodejs2 --save

导入

import QRCode from 'qrcodejs2'

使用

<div class="qrcode" ref="qrCodeDiv"></div>
<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
  },
  methods: {
    bindQRCode() {
      this.$nextTick(() => {
        new QRCode(this.$refs.qrCodeDiv, {
          text: url,//url地址  文本等需要转换为二维码的内容
          width: 80,
          height: 80,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L, //容错率,L/M/H
        });
      });
    },
  },
  mounted() {
    this.bindQRCode();
  },
};
</script>

清除

//清除二维码
this.$refs.qrCodeDiv.innerHTML = "";

或者你还可以这么写

var qrcode = document.getElementById("qrcode");
var qrcode = new QRCode(qrcode , {
    text: "https://www.baidu.com/",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});
qrcode.clear(); // 清除.
qrcode.makeCode("二维码承载的信息"); // make another code.

标签:插件,vue,qrCodeDiv,qrcodejs2,QRCode,二维码,qrcode
From: https://www.cnblogs.com/fmj521/p/18216065

相关文章

  • 使用nodejs安装并使用vue操作步骤
    1.下载安装nodejs官网下载nodejs并安装,我这边选择Windows的20版本下载地址:https://nodejs.org/en/download/prebuilt-installer安装完成后进入cmd窗口,使用node-v命令检查是否安装成功 如上图所示安装成功 2.配置npm的全局安装路径(npm,nodepakaagemanager,是nodejs的软......
  • VUE学习笔记(四)
    通过子组件实例实现对话框的打开AddCategory.vue页面里调整dialogvue里按钮事件<divclass="dialog-footer"><el-button@click="state.dialogVisible=false">Cancel</el-button><el-buttontype="primary"......
  • idea配置maven插件打包所有jar到lib
    在IntelliJIDEA中配置Maven插件以将所有依赖的JAR打包到一个lib文件夹中,通常不是通过直接配置IDEA来完成的,而是通过在Maven项目的pom.xml文件中添加相应的配置来实现的。下面是一个简单的步骤指南,说明如何在Maven项目中实现这一目标:添加Maven依赖插件:在你的......
  • vue使用右击复制功能
      使用的库xe-clipboard右击复制的 实际使用到的库是xe-clipboard 参考的https://vxetable.cn/v4/#/table/advanced/menu<template><div><vxe-tablebordershow-footer:row-config="{isCurrent:true}":column-config=&q......
  • VUE学习笔记(三)
    本小节为设置跨域和axios请求和获取数据设置跨域,在vue.config.js添加devServer配置const{defineConfig}=require("@vue/cli-service");module.exports=defineConfig({transpileDependencies:true,devServer:{proxy:{"/api":{target:&q......
  • VUE学习笔记(二)
    本小节为搭建布局页和分类页面需要使用到element-plus,添加指令npminstallelement-plus--save布局页从elementplus官网找到布局,粘贴过来<template><el-containerclass="layout-container-demo"><el-asidewidth="200px"><el-scrollbar><divclass=&qu......
  • 基于SpringBoot+Vue的实验室管理系统设计与实现毕设(文档+源码)
            目录一、项目介绍二、开发环境三、功能介绍四、核心代码五、效果图六、源码获取:        大家好呀,我是一个混迹在java圈的码农。今天要和大家分享的是一款基于SpringBoot+Vue的实验室管理系统,项目源码请点击文章末尾联系我哦~目前有各类成品......
  • 基于SpringBoot+Vue的火车订票管理系统设计与实现毕设(文档+源码)
            目录一、项目介绍二、开发环境三、功能介绍四、核心代码五、效果图六、源码获取:        大家好呀,我是一个混迹在java圈的码农。今天要和大家分享的是一款基于SpringBoot+Vue的火车订票管理系统,项目源码请点击文章末尾联系我哦~目前有各类成品......
  • custom:用户自定义插件,提供开放能力
    custom插件的功能:支持用户在右键菜单中自定义插件。简介custom插件大量采用声明式代码(声明代替代码开发),比如:只需使用style=()=>"...",即可注册css。只需使用styleTemplate=()=>({renderArg}),即可引入css文件,并且支持渲染模板。只需使用html=()=>"...",即......
  • vue测试环境打包文件不添加hash和生产环境打包不一致
    npmrunbuild:testnpmrunbuild:pro测试环境打包出来文件和生产包有差异.env.test-配置文件打包出来文件有hash值,加上下面的配置,打包就和pro一致NODE_ENV='production'NODE_ENV只能设置production和development两个参数开发环境是development,生产环境都是produ......