vue 2.x項目 vue-qriously 生成二維碼並下載、cliploard複製粘貼

近日，重構項目某一老模塊時，有一個功能是生成二維碼並下載，還能夠複製連接。列表每項都有二維碼、下載二維碼和複製連接和列表上方總的二維碼。 老模塊是用的qrocode中文文檔，qrcode github。

先想着新模塊中是否有生成二維碼的插件，看了下package.json。 有安裝一個vue-qriously。但搜索了一下，居然沒有使用，多是由於不少二維碼都是後端生成返回連接給前端的。而在其餘H五、微信項目中使用了。看了下這個項目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'
複製代碼

qrious github 地址 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 若川 <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 若川 <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 若川 <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網站 工具類庫合集

小結

一、引入第三方插件等使用時，多查看github 文檔 issue等，在技術社區搜索別人使用的方案。

二、選用第三方插件時，儘量挑選star比較多的，issue處理比較及時的，在更新維護的。

三、富餘時間能夠多研究下別人的項目是如何組織文件，和實現的一些經常使用功能的。

四、儘量去優化本身的代碼，總結回顧。

文章首發於SegmentFault vue 2.x項目 vue-qriously生成二維碼並下載、cliploard複製粘貼

關於

做者：常以若川爲名混跡於江湖。前端路上 | PPT愛好者 | 所知甚少，惟善學。
我的博客
segmentfault前端視野專欄，開通了前端視野專欄，歡迎關注~
掘金專欄，歡迎關注~
知乎前端視野專欄，開通了前端視野專欄，歡迎關注~
github blog，求個star^_^~