近日，重構項目某一老模塊時，有一個功用是天生二維碼並下載，還能夠複製鏈接。列表每項都有二維碼、下載二維碼和複製鏈接和列表上方總的二維碼。
老模塊是用的qrocode中文文檔，qrcode github。
先想着新模塊中是不是有天生二維碼的插件，看了下package.json。
有裝置一個vue-qriously。但搜颳了一下，居然沒有運用，能夠是由於許多二維碼都是後端天生返回鏈接給前端的。而在其他H5、微信項目中運用了。看了下這個項目star數是113。但我不想從新引入老模塊的qrcodejs，從新引入其他的二維碼插件，相對比較貧苦。因而就堅持統一用vue-qriously了。
猜測當時引入這個是vue 資本合集awesome-vue中，qrcode相干第一個就是vue-qriously。
vue-qriously插件運用
// 進口js文件
// npm install vue-qriously -S
import Vue from 'vue';
import VueQriously from 'vue-qriously';
Vue.use(VueQriously);// vue 文件
<template>
<qriously :value="value" size="size" :backgroundAlpha="backgroundAlpha"/>
</template>
<script>
export default {
name: 'app',
data(){
return {
// 能夠自定義，必填項。
value: 'http://lxchuan12.github.io/',
// 二維碼大小 默許 100
size: 80,
// 背景通明度，默許通明 0
backgroundAlpha： 1,
}
}
}
</script>更多參數設置能夠檢察：github 堆棧 v-qriously.vue源碼
檢察代碼能夠發明，開首引用了qrious，這個star就多一點，600多。
import Qrious from 'qrious'下載二維碼
大略的翻看下以上相干文檔，寫完正準備要做下載功用。這時刻發明，哎呀，居然就是只天生了一個canvas。
因而百度(暴露了用百度…我也想用谷歌，但如今不可…)了下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+'"/>');
// 搜刮到一些其他的計劃，以為挺貧苦。
// 嗯，這個簡樸。想着我們項目兼容性沒什麼請求，因而就用這個了。天生了img的src資本，那末就能夠下載了。
// 老模塊是用的`jquery` + `seajs` + `vue1.x`
// 新模塊只管要去除`jquery`。
let src = $('.img').src;
let aLink = $('<a></a>').attr('href', src).attr('download', 'xxx二維碼.png').appendTo('body');
aLink[0].click();
aLink.remove();// 新模塊 去除jquery
let elem = document.createElement('a');
elem.setAttribute('href', imgSrc);
elem.setAttribute('download', 'xxx二維碼.png');
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);但如許寫也相對比較貧苦。
項目中封裝了一個v-click指令。
/**
* vClick 觸發點擊
* @type {Object}
*/
export const vClick = {
directives: {
click: {
/**
* 值更新時刻觸發點擊
* @author 軒轅Rowboat <lxchuan12@163.com>
* @date 2018-05-15
* @param {HTMLElement} el 指令所綁定的元素
* @param {Boolean} options.value 綁定值(新)
* @param {Boolean} options.oldValue 綁定值(舊)
*/
update(el, { value, oldValue }){
if(value && !oldValue){
el.click();
}
},
},
},
};<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二維碼">
</div>
<a :href="exportLink" v-click="download" :download="downloadFilename"></a>
<a @click.stop="listShare">檢察鏈接/二維碼</a>
</div>
</template>
<script>
export default {
// 提掏出重要代碼
data(){
retrun {
// 下載
download: false,
downloadFilename: 'xxx二維碼',
listSharingLinkSrc: '',
listSharingLinkSrc: '',
listShareShow: false,
}
},
// ...
methods: {
/**
* 檢察鏈接/二維碼
* @author 軒轅Rowboat <lxchuan12@163.com>
* @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;
},
/**
* 表格上方：下載二維碼列表
* @author 軒轅Rowboat <lxchuan12@163.com>
* @date 2018-05-15
*/
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>代碼寫到這裏，嗯，完成完了下載。但又發明又一需求，顯現大小是80 * 80，下載需如果160 * 160。
顯現大小和下載大小不一樣。
參考了下老模塊，qrcodejs襯着出來的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>vue-qriously襯着出來是
<div>
<canvas width="80" width="80"></canvas>
</div>因而我能夠把天生的imgSrc資本,
<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>這就完成了下載的資本是160 * 160，用款式掌握圖片顯現80 * 80。
代碼寫完，以為應當給vue-qriously寫個pr,完成 不僅僅是襯着canvas，而是讓人人能夠遴選時img照樣canvas。又去翻了翻這個項目的issue,有一個issue鏈接：how to make this canvas exchange to img 就是說的這個。還沒封閉。
i think u can create type let user select img and canvas.// 有一個復興
If you want to make it become downloadable, maybe you can transform it from canvas easily by canvas.toDataURL()文章寫到這裏，我發明如許好像不太妥。我的場景，是點擊時顯現浮層（浮層有二維碼和複製鏈接地點和下載二維碼按鈕等），獵取canvas元素，去轉成img src，再去襯着到頁面，而且圖片能夠會閃，由於是現實大小是160，款式強迫掌握在80。
何不天生兩份，一份是用來獵取資本下載的。一份用來顯現的。嗯，之後去優化下。
順帶說一下，複製粘貼
cliploard 複製粘貼
老模塊中是用的cliploardclipboard github堆棧。就是我引入的。
新模塊還沒運用過，但依舊運用這個。
// 裝置
// npm install clipboard --save
<template @click="Clip($event, '快來複制')"><template>
// 封裝成一個函數
import Clipboard from 'clipboard';
export default function Clip(event，text) {
const clipboard = new Clipboard(event.target, {
text: () => text
});
clipboard.on('success', () => {
console.log('複製勝利');
clipboard.off('error');
clipboard.off('success');
clipboard.destroy();
});
clipboard.on('error', () => {
console.log('複製失利，請革新嘗嘗');
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
});
clipboard.onClick(event);
}固然也能夠封裝成vue指令。
能夠參考vue-element-admin這個項目
之前我看的時刻照樣3000多star，如今1.2w+，申明值得進修。
別的引薦awesomes網站 東西類庫合集
小結
1、引入第三方插件等運用時，多檢察github 文檔 issue等，在手藝社區搜刮他人運用的計劃。
2、選用第三方插件時，只管遴選star比較多的，issue處置懲罰比較實時的，在更新保護的。
3、充裕時候能夠多研討下他人的項目是怎樣構造文件，和完成的一些經常使用功用的。
4、只管去優化本身的代碼，總結回憶。
關於
作者：常以軒轅Rowboat若川為名混跡於江湖。前端路上 | PPT愛好者 | 所知甚少，唯善學。
個人博客segmentfault前端視野專欄，開通了前端視野專欄，迎接關注
掘金專欄，迎接關注
知乎前端視野專欄，開通了前端視野專欄，迎接關注
github，迎接follow~
