qrcodejs2–Vue生成二维码组件封装

qrcodejs2–Vue生成二维码组件封装1.安装qrcodejs2:npminstallqrcodejs2–saveyarnaddqrcodejs22.初步封装组件:/***@file生成二维码的组件*@authorWalker*@date2020-03-16*/<template><divclass=”emqrcode”><but…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

1.安装qrcodejs2:

npm install  qrcodejs2 --save

Jetbrains全家桶1年46,售后保障稳定

yarn add  qrcodejs2

2.初步封装组件:

/** * @file 生成二维码的组件 * @author Walker * @date 2020-03-16 */
<template>
  <div class="emqrcode">
    <button @click="showQRcode">点击分享二维码</button>
    <div id="qrcode" ref="qrcode"></div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default { 
   
  components: { 
    QRCode },
  data() { 
   
    return { 
   
      link: "https://www.baidu.com/"
    };
  },
  methods: { 
   
    /** * @description 生成二维码 * @param {number} qWidth 宽度 * @param {number} qHeight 高度 * @param {string} qText 二维码内容(跳转连接) * @param {string} qRender 渲染方式(有两种方式 table和canvas,默认是canvas) */
    qrcode(qWidth, qHeight, qText, qRender) { 
   
      let qrcode = new QRCode("qrcode", { 
   
        width: qWidth,
        height: qHeight,
        text: qText,
        render: qRender
      });
    },

    /** * @description 点击显示二维码 */
    showQRcode() { 
   
      //二维码初始化 点击一次添加一个二维码
      this.$refs.qrcode.innerHTML = "";
      this.$nextTick(function() { 
   
        this.qrcode(124, 124, this.link, "canvas");
      });
    }
  }
};
</script>

<style lang="less">
.emqrcode { 
   
  width: 100%;
  background-color: #f00;
}
</style>

最后的样式:

在这里插入图片描述

3.结合ElementUI:

/** * @file 生成二维码的组件 * @author Walker * @date 2020-03-16 */
<template>
<div class="emqrcode">
<el-button type="primary" class="left_transition" @click="showShare = !showShare">
<i class="el-icon-caret-left"></i>
</el-button>
<div class="share_box">
<transition name="el-zoom-in-center">
<div v-show="showShare" class="transition-box">
<el-button type="text" class="share_QRcode" @click="showQRcode">点击分享二维码</el-button>
</div>
</transition>
</div>
<el-dialog
title="分享二维码"
custom-class="dialog_style"
:visible.sync="centerDialogVisible"
width="40%"
center
@open="showQRcode"
>
<div :append-to-body="false" id="qrcode" ref="qrcode"></div>
<span slot="footer" class="dialog-footer">
<a class="linl_style">复制链接:{ 
{ 
link}}</a>
<!-- <el-button @click="centerDialogVisible = false">取 消</el-button> -->
<!-- <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button> -->
</span>
</el-dialog>
</div>
</template>
<script>
import QRCode from "qrcodejs2";
export default { 

components: { 
 QRCode },
data() { 

return { 

link:"https://www.baidu.com/",
centerDialogVisible: false,
showShare: false
};
},
methods: { 

/** * @description 生成二维码 * @param {number} qWidth 宽度px * @param {number} qHeight 高度px * @param {string} qText 二维码内容(跳转连接) * @param {string} qRender 渲染方式(有两种方式 table和canvas,默认是canvas) */
qrcode(qWidth, qHeight, qText, qRender) { 

let qrcode = new QRCode("qrcode", { 

width: qWidth,
height: qHeight,
text: qText,
render: qRender
});
},
/** * @description 遮罩打开的回调 点击显示二维码 */
showQRcode() { 

//收回抽屉
this.showShare = false;
//调用函数生成二维码
this.$nextTick(function() { 

//二维码初始化 点击一次添加一个二维码
this.$refs.qrcode.innerHTML = "";
this.qrcode(124, 124, this.link, "canvas");
});
//打开遮罩
this.centerDialogVisible = true;
}
}
};
</script>
<style lang="less" scoped>
.left_transition { 

border-radius: 0;
border: none;
border-right: 1px solid #ccc;
background-color: #4157ff;
height: 36px;
padding: 0 4px 0 3px;
}
.share_box { 

display: inline-block;
height: 36px;
border: none;
vertical-align: top;
}
.emqrcode { 

position: fixed;
right: 17px;
top: 20px;
width: auto;
// background-color: #4157ff;
z-index: 3000;
color: #ffffff;
}
.share_QRcode { 

height: 36px;
color: #ffffff;
font-size: 10px !important;
}
.share_QRcode :hover { 

color: #eef;
}
.emqrcode :hover { 

// background-color: rgb(167, 206, 255);
}
.transition-box { 

background-color: #4157ff;
text-align: center;
color: #fff;
padding: 0 2px;
box-sizing: border-box;
border: none;
}
.linl_style { 

color: #4157ff;
font-size: 12px;
}
</style>
<style lang="less">
#qrcode { 

img { 

margin: 0 auto;
}
}
</style>

效果如图:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/234557.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • settimeout()方法_setinterval函数

    settimeout()方法_setinterval函数setTimeOut()は、指定された時間「待ってから」指定された動作を行う関数です。setTimeOut():等待指定时间,执行指定方法。 setTimeInterval()は、指定された時間「間隔ごとに」指定された動作を行う関数です。setTimeInterval():间隔指定时间,执行指定方法。 処理の開始を待ちたいのであれば「setTimeOut」を使いますし、如果是从处理…

  • AjaxPro2完整入门教程[通俗易懂]

    AjaxPro2完整入门教程[通俗易懂]网上关于AjaxPro的完整教程太少,所以这里我利用下自己的空余时间写一篇较为完整的AjaxPro教程,希望大家能够提出更多宝贵的建议

  • 多种DLL注入技术原理介绍

    多种DLL注入技术原理介绍本文中我将介绍DLL注入的相关知识。不算太糟的是,DLL注入技术可以被正常软件用来添加/扩展其他程序,调试或逆向工程的功能性;该技术也常被恶意软件以多种方式利用。这意味着从安全角度来说,了解DLL注入的工作原理是十分必要的。不久前在为攻击方测试(目的是为了模拟不同类型的攻击行为)开发定制工具的时候,我编写了这个名为“injectAllTheThings”的小工程的大…

  • PHP fread_php读取文件内容的方法和函数

    PHP fread_php读取文件内容的方法和函数phpfread函数与fread函数用法php教程fread函数与fread函数用法/*fread语法:stringfread(resource$handle,int$length)fread()读取到的字节长度由处理引用的文件指针。读尽快停止对符合下列条件之一:已经读取的字节长度!eof(文件结束)达到一包可用网络(流)已阅读8192字节(打开后用户空间流)*///fread…

  • iOS中什么是superView?(新手概念简述版)[通俗易懂]

    iOS中什么是superView?(新手概念简述版)[通俗易懂]文/司马陶冶(简书作者)/文章有删改原文链接:http://www.jianshu.com/p/8537dac37852著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。在iPhone

  • pvzβ版下载_掌上生活app下载安装

    pvzβ版下载_掌上生活app下载安装环境要求HttpRunner是一个基于Python开发的测试框架,可以运行在macOS、Linux、Windows系统平台上。这里使用macOS系统进行演示对于python版本要求:py

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号