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

時間 2019-12-06

標籤 vue 2.x 項目 qriously 生成二維下載 cliploard 複製粘貼简体版

原文原文鏈接

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

先想着新模塊中是否有生成二維碼的插件，看了下package.json。
有安裝一個vue-qriously。但搜索了一下，居然沒有使用，多是由於不少二維碼都是後端生成返回連接給前端的。而在其餘H五、微信項目中使用了。看了下這個項目star數是113。但我不想從新引入老模塊的qrcodejs，從新引入其餘的二維碼插件，相對比較麻煩。因而就保持統一用vue-qriously了。
猜測當時引入這個是vue 資源合集awesome-vue中，qrcode相關第一個就是vue-qriously。html

`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 文檔vue

下載二維碼

粗略的翻看下以上相關文檔，寫完正準備要作下載功能。這時發現，哎呀，居然就是隻生成了一個canvas。
因而百度(暴露了用百度...我也想用谷歌，但如今不行...)了下canvas如何轉圖片。
stackoverflow Capture HTML Canvas as gif/jpg/png/pdf?java

var canvas = document.getElementById("mycanvas");
var imgSrc    = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
// 搜索到一些其餘的方案，感受挺麻煩。
// 嗯，這個簡單。想着咱們項目兼容性沒什麼要求，因而就用這個了。

生成了img的src資源，那麼就能夠下載了。jquery

// 老模塊是用的`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指令。git

/**
 * 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。github

顯示大小和下載大小不同。

參考了下老模塊，qrcodejs渲染出來的html,npm

//  跟這個相似
<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渲染出來是json

<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處理比較及時的，在更新維護的。
三、富餘時間能夠多研究下別人的項目是如何組織文件，和實現的一些經常使用功能的。
四、儘量去優化本身的代碼，總結回顧。

關於

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