搜索到
7
篇与
react
的结果
-
-
QR Code Styling二维码生成插件 [QR Code Styling] 是用于生成带有徽标和样式的二维码的JavaScript库。 {abtn icon="fa-link" color="#27AE60" href="https://qr-code-styling.com" radius="2" content="效果体验"/}安装npm i qr-code-styling或yarn add qr-code-styling使用<template> <div> <QRCodeVue3 value="Simple QR code" /> <QRCodeVue3 :width="200" :height="200" value="https://blogs.xrpweb.cn/" :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }" :imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }" :dotsOptions="{ type: 'dots', color: '#26249a', gradient: { type: 'linear', rotation: 0, colorStops: [ { offset: 0, color: '#26249a' }, { offset: 1, color: '#26249a' }, ], }, }" :backgroundOptions="{ color: '#ffffff' }" :cornersSquareOptions="{ type: 'extra-rounded', color: '#000000' }" :cornersDotOptions="{ type: undefined, color: '#000000' }" fileExt="png" :download="true" myclass="my-qur" imgclass="img-qr" downloadButton="my-button" :downloadOptions="{ name: 'vqr', extension: 'png' }" /> </div> </template> <script> import QRCodeVue3 from "qrcode-vue3"; export default { name: 'QRCodeVue3Example', components: { QRCodeVue3 }, } </script><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>QR Code Styling</title> <script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script> </head> <body> <div id="canvas"></div> <script type="text/javascript"> const qrCode = new QRCodeStyling({ width: 300, height: 300, type: "svg", data: "https://www.facebook.com/", image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg", dotsOptions: { color: "#4267b2", type: "rounded" }, backgroundOptions: { color: "#e9ebee", }, imageOptions: { crossOrigin: "anonymous", margin: 20 } }); qrCode.append(document.getElementById("canvas")); qrCode.download({ name: "qr", extension: "svg" }); </script> </body> </html>React示例 (Codesandbox)Angular示例 (Codesandbox)React示例Angular示例Vue示例API文档QRCodeStyling 实例new QRCodeStyling(options) => QRCodeStyling参数类型描述optionsobjectInit objectoptions 结构属性类型(可选值)默认值描述widthnumber300画布尺寸heightnumber300画布尺寸typestring ('canvas' 'svg')canvas将呈现的元素的类型datastring日期将被编码为二维码imagestring-二维码中心的图标marginnumber0画布周围的边距qrOptionsobject-选项将传递给qrcode-generator库imageOptionsobject-具体图像选项，详细信息见下文dotsOptionsobject-圆点样式选项cornersSquareOptionsobject 角落中的方形样式选项cornersDotOptionsHelperobject 角点样式选项backgroundOptionsobject QR背景样式选项options.qrOptions属性类型默认值typeNumbernumber (0 - 40)0modestring ('Numeric' 'Alphanumeric' 'Byte' 'Kanji')errorCorrectionLevelstring ('L' 'M' 'Q' 'H')'Q'options.imageOptions属性类型默认值描述hideBackgroundDotsbooleantrue隐藏图像覆盖的所有点imageSizenumber0.4图像大小的系数。不建议使用ove 0.5。越低越好marginnumber0以像素为单位的图像边距crossOriginstring('anonymous' 'use-credentials') 如果想从其他来源下载二维码，请设置“anonymous”options.dotsOptions属性类型默认值描述colorstring'#000'QR点的颜色gradientobject QR点的梯度typestring ('rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded')'square'QR点的样式options.backgroundOptions属性类型默认值colorstring'#fff'gradientobjectoptions.cornersSquareOptions属性类型默认值描述colorstring-角正方形的颜色gradientobject-角隅坡度typestring ('dot' 'square' 'extra-rounded') 角正方形的样式options.cornersDotOptions属性类型默认值描述colorstring 角点颜色gradientobject 角点梯度typestring ('dot' 'square') 角点样式Gradient structureoptions.dotsOptions.gradientoptions.backgroundOptions.gradientoptions.cornersSquareOptions.gradientoptions.cornersDotOptions.gradient属性类型默认值描述typestring ('linear' 'radial')"linear"梯度扩散类型rotationnumber0以弧度为单位的梯度旋转 (Math.PI === 180 degrees)colorStopsarray of objects 渐变色，例如： [{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]Gradient colorStops structureoptions.dotsOptions.gradient.colorStops[]options.backgroundOptions.gradient.colorStops[]options.cornersSquareOptions.gradient.colorStops[]options.cornersDotOptions.gradient.colorStops[]属性类型默认值描述offsetnumber (0 - 1) 渐变范围中颜色的位置colorstring 渐变范围内光圈的颜色QRCodeStyleing方法QRCodeStyling.append(container) => void属性类型描述containerDOM element此容器将用于显示二维码QRCodeStyling.getRawData(extension) => Promise<Blob>属性类型默认值描述extensionstring ('png' 'jpeg' 'webp' 'svg')'png'斑点类型QRCodeStyling.update(options) => void属性类型描述optionsobject与初始化选项相同QRCodeStyling.download(downloadOptions) => Promise<void>属性类型描述downloadOptionsobject带有扩展名和文件名的选项（非必填）downloadOptions属性类型默认值描述namestring'qr'下载文件的名称extensionstring ('png' 'jpeg' 'webp' 'svg')'png'文件扩展名
-
-
适配iphoneX底部安全区 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"><div class="bottom-btn-wrap"> //外面包一层 <div class="main_btn2"></div> //这个是按钮 <div class="placeholder-btn"></div> </div>.PlanBookbxModule .bottom-btn-wrap { position: fixed; left: 0; right: 0; bottom: 0; } .PlanBookbxModule .main_btn, .PlanBookbxModule .main_btn2 { width: 100%; box-sizing: border-box; height: 2.34667rem; padding-bottom: env(safe-area-inset-bottom); background-repeat: no-repeat; background-size: 100% 100%; } //这里是下面安全区 为了不让iphoneX下面的横杠不遮挡按钮或者图片 .PlanBookbxModule .placeholder-btn { height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom); background: #fff; } #root { padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); box-sizing: border-box; }
