vue 2.x项目 vue-qriously 生成二维码并下载、cliploard复制粘贴

摘要：近日，重构项目某一老模块时，有一个功能是生成二维码并下载，还可以复制链接。先想着新模块中是否有生成二维码的插件，看了下。项目中封装了一个指令。一份用来显示的。顺带说一下，复制粘贴复制粘贴老模块中是用的仓库。

近日，重构项目某一老模块时，有一个功能是生成二维码并下载，还可以复制链接。列表每项都有二维码、下载二维码和复制链接和列表上方总的二维码。
老模块是用的qrocode中文文档，qrcode github。

先想着新模块中是否有生成二维码的插件，看了下package.json。
有安装一个vue-qriously。但搜索了一下，竟然没有使用，可能是因为很多二维码都是后端生成返回链接给前端的。而在其他H5、微信项目中使用了。看了下这个项目star数是113。但我不想重新引入老模块的qrcodejs，重新引入其他的二维码插件，相对比较麻烦。于是就保持统一用vue-qriously了。
猜想当时引入这个是vue 资源合集awesome-vue中，qrcode相关第一个就是vue-qriously。

// 入口js文件
// npm install vue-qriously -S
import Vue from "vue";
import VueQriously from "vue-qriously";
Vue.use(VueQriously);

// vue 文件

更多参数配置可以查看：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资源，那么就可以下载了。

// 老模块是用的`jquery` + `seajs` + `vue1.x`
// 新模块尽量要去除`jquery`。
let src = $(".img").src;
let aLink = $("").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 
             * @date   2018-05-15
             * @param  {HTMLElement} el                指令所绑定的元素
             * @param  {Boolean}     options.value     绑定值(新)
             * @param  {Boolean}     options.oldValue  绑定值(旧)
             */
            update(el, { value, oldValue }){
                if(value && !oldValue){
                    el.click();
                }
            },
        },
    },
};

这就实现了下载的资源是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。
何不生成两份，一份是用来获取资源下载的。一份用来显示的。嗯，之后去优化下。
顺带说一下，复制粘贴

老模块中是用的cliploardclipboard github仓库。就是我引入的。

新模块还没使用过，但依然使用这个。

// 安装
// npm install clipboard --save