Recently, when reconstructing an old module of the project, there was a function to generate two-dimensional code and download it, and also to copy links. Each item in the list has a QR code, download the QR code and copy the link and the total QR code above the list. The old module is using qrocode Chinese document, qrcode Github.
First consider whether there is a plug-in to generate qr code in the new module, and take a look at package.json. There is a vue-Qriously installed. But a search, unexpectedly did not use, may be because many two-dimensional codes are generated back to the front end of the link. It is used in other H5 and wechat projects. If YOU look at this project, the star number is 113. But I don’t want to reintroduce the old module qrcodeJS, reintroduce other TWO-DIMENSIONAL code plug-in, relatively troublesome. So we kept it unified in Vue-Qriously. The first qrcode related to vue was vue-Qriously.
vue-qriouslyThe plug-in USES
NPM install vue-qriously -s import vue from'vue';
import VueQriously from 'vue-qriously';
Vue.use(VueQriously);
Copy the code// Vue file <template> <qriously :value="value" size="size" :backgroundAlpha="backgroundAlpha"/>
</template>
<script>
export default {
name: 'app'.data() {return{// It can be customized. It is mandatory. value:'http://lxchuan12.github.io/'BackgroundAlpha: 1,}}} < script>Copy the codeQriously.vue = qriously.vue = qriously.vue = qriously.vue = qriously.vue = qriously.vue = qriously.vue = qriously.vue = qriously.vue
import Qrious from 'qrious'
Copy the codeQrious Github address qrious document
Download qr code
Take a quick look at the above related documents and prepare to download them. And then you realize, oops, you’ve only generated one canvas. So Baidu (exposed with Baidu… I’d love to use Google, but I can’t right now…) Here’s how to rotate pictures on canvas. stackoverflow Capture HTML Canvas as gif/jpg/png/pdf?
var canvas = document.getElementById("mycanvas");
var imgSrc = canvas.toDataURL("image/png");
document.write('<img src="'+img+'" / >'); // Search some other solutions, feel quite troublesome. // Well, that's easy. We figured we didn't have any requirements for project compatibility, so we used this.Copy the codeImg SRC resources have been generated, and you are ready to download.
// The old module is' jquery '+' seajs' + 'vue1. X' // The new module is trying to remove 'jquery'.let src = $('.img').src;
let aLink = $('<a></a>').attr('href', src).attr('download'.'XXX QR code. PNG').appendTo('body');
aLink[0].click();
aLink.remove();
Copy the code// New module removes jquerylet elem = document.createElement('a');
elem.setAttribute('href', imgSrc);
elem.setAttribute('download'.'XXX QR code. PNG');
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
Copy the codeBut it’s also relatively cumbersome to write this way. A V-click directive is encapsulated in the project.
/** * vClick triggers the click * @type {Object}
*/
exportconst vClick = { directives: { click: <[email protected]> * @date 2018-05-15 * @param {HTMLElement} el directive binding element * @param {Boolean} options.value binding value (new) * @param {Boolean} options.oldValue binding value (old) */ update(el, {value, oldValue}){if(value && ! oldValue){ el.click(); }},},},};Copy the code<template>
<div>
<div class="img" v-show="listShareShow">
<qriously id="qriously" :backgroundAlpha="1" :value="listSharingLink" :size="160" v-show="false"/>
<img :src="listSharingLinkSrc" alt="XXX TWO-DIMENSIONAL code">
</div>
<a :href="exportLink" v-click="download" :download="downloadFilename"></a>
<a @click.stop="listShare"</a> </div> </template> <script>exportDefault {// Extracts the main codedata(){retrun {// Download:false,
downloadFilename: 'XXX TWO-DIMENSIONAL code',
listSharingLinkSrc: ' ',
listSharingLinkSrc: ' ',
listShareShow: false}}, //... * @author @date 2018-05-15 */ listShare(event){if(! this.listSharingLinkSrc){let canvas = document.querySelector('#qriously canvas');
let imgSrc = canvas.toDataURL('image/png'); this.listSharingLinkSrc = imgSrc; } this.listShareShow = ! this.listShareShow; }, /** * top of table: DownloadQrcode (event, linkSrc, downloadFilename){ event.stopPropagation(); this.exportLink = linkSrc; this.downloadFilename = downloadFilename; this.download =true;
this.$nextTick(() => {
this.exportLink = ' ';
this.download = false;
this.downloadFilename = ' '; }); ,}}}; </script>Copy the codeSo I’m done with the code, and I’m done with the download. But I found another requirement, display size is 80 * 80, download needs to be 160 * 160.
The display size is different from the download size.
With reference to the old module, qrcodeJS rendered HTML,
<div id="qrcode_1" title="your content">
<canvas width="256" height="256" style="display: none;"></canvas>
<img alt="Scan me!" style="display: block;" src="data:image/png; base64,xxx">
</div>
Copy the codeVue-qriously renders it
<div>
<canvas width="80" width="80"></canvas>
</div>
Copy the codeSo I can add the generated imgSrc resource,
<template>
<div>
<canvas width="160" width="160" v-show="false"></canvas>
<img class="img" :src="imgSrc"/>
</div>
</template>
<style lang="less">
.img{
width: 80px;
height: 80px;
}
</style>
Copy the codeThis allows you to download resources of 160 by 160 and style images of 80 by 80. After writing the code, WE felt we should write pr in vue-Qriously to not only render canvas, but to let people choose whether img is canvas or not. I checked the issue of this project again, and there was an issue link: How to make this Canvas Exchange to IMG. It’s not closed yet.
i think u can create type let user select img and canvas.
Copy the codeIf you want to make it become downloadable, maybe you can transform it from canvas easily by canvas.todataurl ()Copy the codeAt this point in the article, I find this seems inappropriate. In my scene, the float layer is displayed when clicked (the float layer has two-dimensional code and the button of copy link address and download two-dimensional code, etc.), the canvas element is obtained, converted to IMG SRC, and then rendered to the page, and the picture may flash, because the actual size is 160, and the style is forced to control at 80. Why not generate two copies, one of which is used to get resources to download. One for display. Yeah, I’ll optimize it later. Copy and paste, by the way
Cliploard copy and paste
The old module is used in the cliploardclipboard github repository. I’m the one who introduced it.
The new module has not been used yet, but still uses this.
NPM install clipboard --save <template @click="Clip($event, 'Come copy ')"><template> // encapsulates the function import Clipboard from'clipboard';
export default functionClip(event, text) {const clipBoard = new clipboard (event.target, {text: () => text}); clipboard.on('success', () => {
console.log('Copy successful');
clipboard.off('error');
clipboard.off('success');
clipboard.destroy();
});
clipboard.on('error', () => {
console.log('Replication failed, please try refresh');
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
});
clipboard.onClick(event);
}
Copy the codeOf course, it can also be encapsulated as vUE instructions. I can refer to the vue-element-admin project for reference. When I read it before, it was still more than 3000 stars, but now it is 1.2W +, indicating that it is worth learning. Awesomes website tool class library collection is also recommended
summary
1. When introducing third-party plug-ins, check the Github document issue and search for other people’s solutions in the technical community.
2. When selecting third-party plug-ins, select as many stars as possible, deal with issues in a timely manner, and update and maintain them.
3, spare time can study how other people’s projects organize files, and implement some common functions.
4. Optimize your code as much as possible and review it.
This article was first published in SegmentFault Vue 2.x project Vue-Qriously generating qr codes, downloading them, and copying and pasting them in Cliploard
about
Author: Often in the name of ruochuan mixed traces in rivers and lakes. The front road lovers | | PPT know little, only good study. Personal blog segmentfault front view column, opened front view column, welcome to pay attention to ~ dig gold column, welcome to pay attention to ~ github blog, begged a star^_^~