vue二维码生成可自定义logo

代码已上传至github
github代码地址：https://github.com/Miofly/mio.git

<template xlang="wxml"><view class="container"><!-- pdground="rgba(123, 191, 234, 1)  qrR(res) { this.src = res }--><tki-qrcode :show="true" :size="200" unit="upx" cid="qrcode1" ref="qrcode"val="https://ext.dcloud.net.cn/plugin?id=39" :showLoading="false"icon="/static/images/lz/lz_bg.png":iconSize="40" :onval="false" :loadMake="true" :usingComponents="true"@result="qrR" /></view>
</template>
<script>import {dateUtils} from 'mioJs/dateUtils'export default {onLoad () {console.log(dateUtils.today({ymrSign: true}))},data() {return {ifShow: true,val: 'http://www.baidu.com', // 要生成的二维码值size: 200, // 二维码大小unit: 'upx', // 单位background: '#b4e9e2', // 背景色foreground: '#309286', // 前景色pdground: '#32dbc6', // 角标色icon: '', // 二维码图标iconsize: 40, // 二维码图标大小lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行onval: false, // val值变化时自动重新生成二维码loadMake: true, // 组件加载完成后自动生成二维码src: '' // 二维码生成后的图片地址或base64}},methods: {creatQrcode() {this.$refs.qrcode._makeCode()},saveQrcode() {this.$refs.qrcode._saveCode()},qrR(res) {this.src = res},clearQrcode() {this.$refs.qrcode._clearCode()this.val = ''},ifQrcode() {this.ifShow = !this.ifShow},},}
</script><style>/* @import "../../../common/icon.css"; */.container {display: flex;flex-direction: column;width: 100%;}.qrimg {display: flex;justify-content: center;}.qrimg-i {margin-right: 10px;}slider {width: 100%;}input {width: 100%;margin-bottom: 20 upx;}.btns {display: flex;flex-direction: column;width: 100%;}button {width: 100%;margin-top: 10 upx;}
</style>

组件代码

<template xlang="wxml" minapp="mpvue"><view class="tki-qrcode"><!-- #ifndef MP-ALIPAY --><canvas class="tki-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" /><!-- #endif --><!-- #ifdef MP-ALIPAY --><canvas :id="cid" :width="cpSize" :height="cpSize" class="tki-qrcode-canvas" /><!-- #endif --><image v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" /></view>
</template><script>
import QRCode from "./qrcode.js"
let qrcode
export default {name: "tki-qrcode",props: {cid: {type: String,default: 'tki-qrcode-canvas'},size: {type: Number,default: 200},unit: {type: String,default: 'upx'},show: {type: Boolean,default: true},val: {type: String,default: ''},background: {type: String,default: '#ffffff'},foreground: {type: String,default: '#000000'},pdground: {type: String,default: '#000000'},icon: {type: String,default: ''},iconSize: {type: Number,default: 40},lv: {type: Number,default: 3},onval: {type: Boolean,default: false},loadMake: {type: Boolean,default: false},usingComponents: {type: Boolean,default: true},showLoading: {type: Boolean,default: true},loadingText: {type: String,default: '二维码生成中'},},data() {return {result: '',}},methods: {_makeCode() {let that = thisif (!this._empty(this.val)) {qrcode = new QRCode({context: that, // 上下文环境canvasId:that.cid, // canvas-idusingComponents: that.usingComponents, // 是否是自定义组件showLoading: that.showLoading, // 是否显示loadingloadingText: that.loadingText, // loading文字text: that.val, // 生成内容size: that.cpSize, // 二维码大小background: that.background, // 背景色foreground: that.foreground, // 前景色pdground: that.pdground, // 定位角点颜色correctLevel: that.lv, // 容错级别image: that.icon, // 二维码图标imageSize: that.iconSize,// 二维码图标大小cbResult: function (res) { // 生成二维码的回调that._result(res)},});} else {uni.showToast({title: '二维码内容不能为空',icon: 'none',duration: 2000});}},_clearCode() {this._result('')qrcode.clear()},_saveCode() {let that = this;if (this.result != "") {uni.saveImageToPhotosAlbum({filePath: that.result,success: function () {uni.showToast({title: '二维码保存成功',icon: 'success',duration: 2000});}});}},_result(res) {this.result = res;this.$emit('result', res)},_empty(v) {let tp = typeof v,rt = false;if (tp == "number" && String(v) == "") {rt = true} else if (tp == "undefined") {rt = true} else if (tp == "object") {if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true} else if (tp == "string") {if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true} else if (tp == "function") {rt = false}return rt}},watch: {size: function (n, o) {if (n != o && !this._empty(n)) {this.cSize = nif (!this._empty(this.val)) {setTimeout(() => {this._makeCode()}, 100);}}},val: function (n, o) {if (this.onval) {if (n != o && !this._empty(n)) {setTimeout(() => {this._makeCode()}, 0);}}}},computed: {cpSize() {if(this.unit == "upx"){return uni.upx2px(this.size)}else{return this.size}}},mounted: function () {if (this.loadMake) {if (!this._empty(this.val)) {setTimeout(() => {this._makeCode()}, 0);}}},
}
</script>
<style>
.tki-qrcode {position: relative;
}
.tki-qrcode-canvas {position: fixed;top: -99999upx;left: -99999upx;z-index: -99999;
}
</style>

vue二维码生成可自定义logo相关推荐

vue二维码生成插件 - npm安装篇
vue二维码生成插件 - npm安装篇具体使用: 1. 安装: npm install vue-qr --save 2. 引入和声明 //在需要生成二维码的文件中引入比如qrCode.vue imp ...
vue二维码生成和打印
二维码生成存放二维码 <div id="qrCode" class="qrCode"><div id='code' class=" ...
iOS二维码生成中间带图片Logo
iOS二维码生成中间带图片效果图: ViewController.h 1 #import <UIKit/UIKit.h> 2 @interface ViewController : UIV ...
vue二维码生成、打印及识别
生成二维码引入QRCode模块 npm install --save qrcode import QRCode from 'qrcode'; 页面代码批量创建二维码及打印,所以加了个v-for & ...
vue二维码生成且带文字图片下载
(一)web页面效果: (二)执行结果: (三)vue代码实例: 1)安装qrcode-vue库:npm install --save qrcode-vue 2)安装html2canvas库:npm ...
uniapp H5 二维码生成
vue 二维码生成步骤: 1. 引入二维码 import QRCode from 'qrcodejs2' 2. html 3. 二维码生成事件 creatQrCode() { var qrcode = ...
二维码生成(根据不同要求)
当时自己尝试从阿里云上弄,但是实在是不好弄.总结了一个工具类,只要调用工具类就行.这个是可以根据不同要求生产不同的二维码. 输入参数这样输入: 代码如下: QRCodeController packa ...
jquery-qrcode客户端二维码生成类库扩展--融入自定义Logo图片
淘宝就不多说了,全球最大的中文假货销售平台(尽管淘宝没有打出全球中文等字样,可是其必须当之无愧).百度,当当等厚颜无耻之徒的明智之举就在于此,老外做的再大也很少会有直接支持中文的,因此他们都会在其名称 ...
vue：生成二维码 qrcode、vue-qr（二维码中间可带logo）
一.方法一 qrcode qrcode - npm 1.1.安装 yarn add qrcode 1.2.页面引入 import QRCode from 'qrcode'; 1.3.方法里边使用 ge ...

vue二维码生成可自定义logo

vue二维码生成可自定义logo相关推荐

最新文章

热门文章