034:vue项目利用qrcodejs2生成二维码示例

在这里插入图片描述

第034个

查看专栏目录: VUE ------ element UI


专栏目标

在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。

(1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,updated, beforeDestroy,destroyed,activated,deactivated,errorCaptured,components,)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if,v-on,v-pre,v-cloak,v-once,v-model, v-html, v-text, keep-alive,slot-scope, filters, v-bind,.stop, .native, directives,mixin,render,国际化,Vue Router等

(2)提供element UI的经典操作:安装,引用,国际化,el-row,el-col,el-button,el-link,el-radio,el-checkbox ,el-input,el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop,v-infinite-scroll, el-drawer等

本文章目录

    • 专栏目标
    • 需求背景
    • 示例效果
    • 示例源代码(共70行)
    • 安装依赖
    • API
    • 核心方法

需求背景

在vue项目开发中,有时候我们需要自己生成二维码来达到目的,这个示例中,我们用qrcodejs2的这个插件来实现这个功能。

示例效果

在这里插入图片描述

示例源代码(共70行)

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2022-09-15
*/
<template><div class="container"><div class="top"><h3>生成二维码</h3><div class="author">大剑师兰特, 还是大剑师兰特,gis-dajianshi</div></div><h4><el-button type="primary" @click="showQRCode()"> 点击生成二维码 </el-button></h4><div class="qrcode2" ref="dajianshi"></div></div>
</template>
<script>import QRCode from 'qrcodejs2'  export default {data() {return {}},methods: {showQRCode() {let url = 'https://dajianshi.blog.csdn.net/' ||window.location.href;var qrcode = new QRCode(this.$refs.dajianshi, {text: url,width: 200,height: 200,colorDark: '#000000',colorLight: '#ffffff',correctLevel: QRCode.CorrectLevel.H});}},}
</script>
<style scoped>.container {width: 1000px;height: 580px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 30px;padding: 10px 0;background: mediumpurple;color: #fff;}.qrcode2{ width: 200px; height: 200px; margin:50px auto 0; } </style>

安装依赖

cnpm install --save qrcodejs2

API

https://www.npmjs.com/package/qrcodejs2

核心方法

			showQRCode() {let url = 'https://dajianshi.blog.csdn.net/' ||window.location.href;var qrcode = new QRCode(this.$refs.dajianshi, {text: url,width: 200,height: 200,colorDark: '#000000',colorLight: '#ffffff',correctLevel: QRCode.CorrectLevel.H});}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/79037.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】常用算术生成算法

0.前言 1.accumulate #include <iostream> using namespace std;// 常用算术生成算法 #include<vector> #include<numeric> //accumulate 的调用头文件void test01() {vector<int>v;for (int i 0; i < 100; i){v.push_back(i);}int total accumu…

Java 复习笔记 - Lambda 表达式 he 经典算法题

文章目录 Lambda表达式 概述&#xff08;一&#xff09;基本作用&#xff08;二&#xff09;特点 一&#xff0c;初识Java中的Lambda 表达式二&#xff0c;函数式编程三&#xff0c;省略写法四&#xff0c;练习&#xff1a;使用Lambda 表达式 简化Comparator接口的匿名形式综合…

TSINGSEE青犀视频AI算法助力构建城市市容·街面秩序管理解决方案

随着城市化进程加快&#xff0c;未经合理规划设置自然形成的马路市场越来越多&#xff0c;这不仅存在交通安全隐患&#xff0c;也造成了市容秩序混乱&#xff0c;严重影响城市市容面貌。 TSINGSEE青犀AI智能分析网关V3内部部署了几十种算法&#xff0c;包括人脸、人体、车辆、…

学习笔记:卸载nav2 navigation2导航

nav2二进制文件安装 nav2导航安装方式分为二进制文件安装和源码方式安装&#xff0c;如果想用最快的方式跑通代码&#xff0c;推荐二进制安装&#xff0c;不用编译&#xff0c;没有缺少依赖编译失败的烦恼&#xff0c; 安装命令&#xff1a; sudo apt install ros-$ROS_DISTR…

iTOP-RK3568开发板Linux 修改kernel logo

本文档配套资料在网盘资料“iTOP-3568 开发板\02_【iTOP-RK3568 开发板】开发资料\10_Linux 系统开发配套资料\05_Linux 修改内核 logo 配套资料”路径下。 5.3.1 准备 logo 系统默认内核 logo&#xff0c;如下图所示&#xff1a; 如 果 想 要 替 换 这 个 logo, 首 先 要 制…

神经网络-pytorch版本

pytorch神经网络基础 torch简介 torch和numpy import torch import numpy as np np_datanp.arange(6).reshape((2,3)) torch_datatorch.from_numpy(np_data) tensor2arraytorch_data.numpy() print(np_data,"\n",torch_data,"\n",tensor2array)torch的数…

2023年已过大半,光通信领域有哪些值得关注的技术趋势?

引言&#xff1a;上个星期&#xff0c;小枣君去深圳参加了CIOE中国光博会&#xff0c;获得了一些光通信领域的最新技术动态进展。今天&#xff0c;我来和大家做一个分享。 这次光博会&#xff0c;整个行业的参与热情很高。据主办方统计&#xff0c;为期三天的展会&#xff0c;现…

Android 11.0 系统system模块开启禁用adb push和adb pull传输文件功能

1.使用场景 在进行11.0的系统定制化开发中,在一些产品中由于一些开发的功能比较重要,防止技术点外泄在出货产品中,禁用 adb pull 和adb push等命令 来获取系统system下的jar 和apk 等文件,所以需要禁用这些命令 2.系统system模块开启禁用adb push和adb pull传输文件功能的…

球谐函数实现环境光照漫反射实践

该文章以及代码主要来自 图形学论文解析与复现&#xff1a;【论文复现】An Efficient Representation for Irradiance Environment Maps 作者&#xff1a;Monica的小甜甜 与原文的不同&#xff1a; 对一些有问题的地方进行了修改添加了注释对有疑问的地方添加了疑问点引入了其…

解决 Elasticsearch 分页查询记录超过10000时异常

查询结果中 hits.total.value 值最大为10000的限制 解决方法: 1、请求设置rest_total_hits_as_inttrue 注意参数需要放在请求头上 builder.addHeader("rest_total_hits_as_int","true"); 2、修改setting的值 #设置返回最大记录条数为1000000 PUT /in…

基于python解决鸡兔同笼问题

一、什么是鸡兔同笼问题&#xff1f; 鸡兔同笼问题是一个经典的数学问题。问题描述&#xff1a;鸡和兔子共有头数a和脚数b&#xff0c;求鸡和兔子的数量。 解析&#xff1a;设鸡的数量为x&#xff0c;兔子的数量为y&#xff0c;那么可以得到以下两个方程&#xff1a; 1. x y…

详解爬虫策略,反爬虫策略,反反爬爬虫策略

爬虫策略 爬取策略是网络爬虫在执行网页抓取任务时所遵循的规则或策略。这些策略决定了爬虫如何从一个页面转到另一个页面&#xff0c;什么时间进行抓取&#xff0c;以及应该抓取哪些内容。以下是几种常见的爬取策略&#xff1a; 深度优先搜索&#xff08;DFS&#xff09; 在…

对抗生成网络总结

对一些基本的对抗生成网络的总结。部分内容整理自Teeyohuang’s blog 文章目录 GAN (NeurIPS, 2014)CGANDCGANStackGANPix2Pix (CVPR, 2017)CycleGAN (ICCV, 2017)SRGAN (CVPR, 2017)StyleGAN (CVPR, 2019) GAN (NeurIPS, 2014) Generative adversarial nets m i n G m a x D …

leetcode top 100 (8)无重复字符的最长子串(滑动窗口

给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"&#xff0c;所以其长度为 3。 package TOP1_10;import java.util.HashMap; import java.…

Tokenview X-ray功能:深入探索EVM系列浏览器的全新视角

Tokenview作为一家领先的多链区块浏览器&#xff0c;为了进一步优化区块链用户的使用体验&#xff0c;我们推出了X-ray&#xff08;余额透视&#xff09;功能。该功能将帮助您深入了解EVM系列浏览器上每个地址的交易过程&#xff0c;以一种直观、简洁的方式呈现地址的进出账情况…

LCP 50.宝石补给

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;LCP 50. 宝石补给 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 模拟操作即可。 解题代码&#xff1a; class Solution {public int giveGem(int[] gem, int[][] operations) {for(int[…

002 Linux 权限

前言 本文将会向您介绍关于linux权限方面的内容&#xff0c;包括文件类型&#xff0c;如何切换用户、基本权限、粘滞位等等 Linux具体的用户 超级用户&#xff1a;可以再linux系统下做任何事情&#xff0c;不受限制 普通用户&#xff1a;在linux下做有限的事情。 超级用户的…

Pytorch intermediate(四) Language Model (RNN-LM)

前一篇中介绍了一种双向的递归神经网络&#xff0c;将数据进行正序输入和倒序输入&#xff0c;兼顾向前的语义以及向后的语义&#xff0c;从而达到更好的分类效果。 之前的两篇使用递归神经网络做的是分类&#xff0c;可以发现做分类时我们不需要使用时序输入过程中产生的输出&…

SSM - Springboot - MyBatis-Plus 全栈体系(八)

第二章 SpringFramework 四、SpringIoC 实践和应用 4. 基于 配置类 方式管理 Bean 4.4 实验三&#xff1a;高级特性&#xff1a;Bean 注解细节 4.4.1 Bean 生成 BeanName 问题 Bean 注解源码&#xff1a; public interface Bean {//前两个注解可以指定Bean的标识AliasFor…

思科的简易配置

vlan 划分配置 1. 拓扑连接 2. 终端设备配置&#xff0c;vlan(v2, v3)配置&#xff0c;模式设置 然后设置交换机 fa 0/5 口为 trunk 模式&#xff0c;使得不同交换机同一 vlan 下 PC 可以互连 3.测试配置结果 用 ip 地址为 192.168.1.1 的主机(PC0)向同一 vlan(v2)下的 192.…