UNPKG

vue-amazing-ui

Version:

An Amazing Vue3 UI Components Library, Using TypeScript.

2 lines (1 loc) 2.13 kB
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("qrcode"),v=["src"],p=["src"],m=e.defineComponent({__name:"QRCode",props:{value:{default:void 0},type:{default:"svg"},icon:{default:void 0},size:{default:160},iconSize:{default:40},color:{default:"#000"},bgColor:{default:"#FFF"},bordered:{type:Boolean,default:!0},borderColor:{default:"rgba(5, 5, 5, 0.06)"},scale:{default:8},errorLevel:{default:"H"}},setup(s,{expose:u}){const o=s,c=e.ref(null),n=e.ref(null),t=e.ref(""),d=e.computed(()=>({width:`${o.size}px`,height:`${o.size}px`,backgroundColor:`${o.bgColor}`,borderColor:`${o.borderColor}`})),i=e.computed(()=>({width:`${o.iconSize}px`,height:`${o.iconSize}px`,backgroundColor:`${o.bgColor}`})),r=e.computed(()=>({quality:1,margin:0,scale:o.scale,color:{dark:o.color,light:"#00000000"},errorCorrectionLevel:o.errorLevel}));return e.watch(()=>[o.value,o.type,r.value],async()=>{o.value&&(o.type==="svg"?(t.value=await a.toString(o.value,r.value),c.value.innerHTML=t.value):o.type==="canvas"?(t.value=await a.toCanvas(o.value,r.value),n.value?.appendChild(t.value)):t.value=await a.toDataURL(o.value,r.value))},{immediate:!0,deep:!0,flush:"post"}),u({getQRCodeImage:()=>o.value&&a.toDataURL(o.value,r.value)}),(l,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["qrcode-wrap",{"qrcode-bordered":l.bordered}]),style:e.normalizeStyle(d.value)},[l.type==="svg"?(e.openBlock(),e.createElementBlock("span",{key:0,ref_key:"qrcodeSVGRef",ref:c,class:"qrcode-svg"},null,512)):e.createCommentVNode("",!0),l.type==="canvas"?(e.openBlock(),e.createElementBlock("span",{key:1,ref_key:"qrcodeCanvasRef",ref:n,class:"qrcode-canvas"},null,512)):e.createCommentVNode("",!0),l.type==="image"?(e.openBlock(),e.createElementBlock("img",{key:2,src:t.value,class:"qrcode-image",alt:"QR Code"},null,8,v)):e.createCommentVNode("",!0),l.icon?(e.openBlock(),e.createElementBlock("img",{key:3,src:l.icon,style:e.normalizeStyle(i.value),class:"qrcode-icon",alt:"QR Code Icon"},null,12,p)):e.createCommentVNode("",!0)],6))}});exports.default=m;