首页
关于
归档
留言板
友链
工具
更多
壁纸
视频
Search
1
TypeError: Cannot read properties of undefined (reading 'map')
2,127 阅读
2
fail api scope is not declared in the privacy agreement
1,610 阅读
3
el-input自动获取焦点(element-ui)
884 阅读
4
组件封装时判断slot是否存在
833 阅读
5
vscode代码切换大小写的教程
750 阅读
小程序
其他
服务器
开发
Vue
uni-app
React
登录
Search
标签搜索
VUE
javascript
小程序
react
wxapp
uni-app
vue3
HTML
CSS
富文本
npm
Vuex
GIT
Element-UI
Linux
上传图片
cookie
localStorage
sessionStorage
内网穿透
Chris
累计撰写
107
篇文章
累计收到
6
条评论
首页
栏目
小程序
其他
服务器
开发
Vue
uni-app
React
页面
关于
归档
留言板
友链
工具
壁纸
视频
搜索到
11
篇与
React
的结果
2024-05-07
Js封装人民币转大写
【原创】js封装人民币转大写
2024年05月07日
16 阅读
0 评论
0 点赞
2023-10-10
yarn的安装和使用
yarn的简介Yarn是facebook发布的一款取代npm的包管理工具yarn的特点速度超快。Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。yarn的安装下载node.js,使用npm安装npm install -g yarn 查看版本:yarn --version安装node.js,下载yarn的安装程序:提供一个.msi文件,在运行时将引导您在Windows上安装YarnYarn 淘宝源安装,分别复制粘贴以下代码行到黑窗口运行即可yarn config set registry https://registry.npm.taobao.org -g yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -gyarn的常用命令安装yarn npm install -g yarn 安装成功后,查看版本号: yarn --version 创建文件夹 yarn md yarn 进入yarn文件夹 cd yarn 初始化项目 yarn init // 同npm init,执行输入信息后,会生成package.json文件 yarn的配置项: yarn config list // 显示所有配置项 yarn config get <key> //显示某配置项 yarn config delete <key> //删除某配置项 yarn config set <key> <value> [-g|--global] //设置配置项 安装包: yarn install //安装package.json里所有包,并将包及它的所有依赖项保存进yarn.lock yarn install --flat //安装一个包的单一版本 yarn install --force //强制重新下载所有包 yarn install --production //只安装dependencies里的包 yarn install --no-lockfile //不读取或生成yarn.lock yarn install --pure-lockfile //不生成yarn.lock 添加包(会更新package.json和yarn.lock): yarn add [package] // 在当前的项目中添加一个依赖包,会自动更新到package.json和yarn.lock文件中 yarn add [package]@[version] // 安装指定版本,这里指的是主要版本,如果需要精确到小版本,使用-E参数 yarn add [package]@[tag] // 安装某个tag(比如beta,next或者latest) //不指定依赖类型默认安装到dependencies里,你也可以指定依赖类型: yarn add --dev/-D // 加到 devDependencies yarn add --peer/-P // 加到 peerDependencies yarn add --optional/-O // 加到 optionalDependencies //默认安装包的主要版本里的最新版本,下面两个命令可以指定版本: yarn add --exact/-E // 安装包的精确版本。例如yarn add foo@1.2.3会接受1.9.1版,但是yarn add foo@1.2.3 --exact只会接受1.2.3版 yarn add --tilde/-T // 安装包的次要版本里的最新版。例如yarn add foo@1.2.3 --tilde会接受1.2.9,但不接受1.3.0 发布包 yarn publish 移除一个包 yarn remove <packageName>:移除一个包,会自动更新package.json和yarn.lock 更新一个依赖 yarn upgrade 用于更新包到基于规范范围的最新版本 运行脚本 yarn run 用来执行在 package.json 中 scripts 属性下定义的脚本 显示某个包的信息 yarn info <packageName> 可以用来查看某个模块的最新版本信息 缓存 yarn cache yarn cache list # 列出已缓存的每个包 yarn cache dir # 返回 全局缓存位置 yarn cache clean # 清除缓存npm 与 yarn命令比较比如说你的项目模块依赖是图中描述的,@1.2.1代表这个模块的版本。在你安装A的时候需要安装依赖C和D,很多依赖不会指定版本号,默认会安装最新的版本,这样就会出现问题:比如今天安装模块的时候C和D是某一个版本,而当以后C、D更新的时候,再次安装模块就会安装C和D的最新版本,如果新的版本无法兼容你的项目,你的程序可能就会出BUG,甚至无法运行。这就是npm的弊端,而yarn为了解决这个问题推出了yarn.lock的机制,这是作者项目中的yarn.lock文件。{callout color="#f0ad4e"}注意:这个文件不要手动修改它,当你使用一些操作如yarn add时,yarn会自动更新yarn.lock。{/callout}
2023年10月10日
57 阅读
0 评论
0 点赞
2023-04-13
上传附件类型统计(accept)日常word、pdf、ppt、excel等
日常开发中有时候会遇到上传附件,往往会限制附件类型,下来我就将常用的附件类型贴出来供大家参考
2023年04月13日
391 阅读
0 评论
0 点赞
2023-01-11
Array 对象方法
方法 描述 concat() 连接两个或更多的数组,并返回结果。 copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中。 entries() 返回数组的可迭代对象。 every() 检测数值元素的每个元素是否都符合条件。 fill() 使用一个固定值来填充数组。 filter() 检测数值元素,并返回符合条件所有元素的数组。 find() 返回符合传入测试(函数)条件的数组元素。 findIndex() 返回符合传入测试(函数)条件的数组元素索引。 forEach() 数组每个元素都执行一次回调函数。 from() 通过给定的对象中创建一个数组。 includes() 判断一个数组是否包含一个指定的值。 indexOf() 搜索数组中的元素,并返回它所在的位置。 isArray() 判断对象是否为数组。 join() 把数组的所有元素放入一个字符串。 keys() 返回数组的可迭代对象,包含原始数组的键(key)。 lastIndexOf() 搜索数组中的元素,并返回它最后出现的位置。 map() 通过指定函数处理数组的每个元素,并返回处理后的数组。 pop() 删除数组的最后一个元素并返回删除的元素。 push() 向数组的末尾添加一个或更多元素,并返回新的长度。 reduce() 将数组元素计算为一个值(从左到右)。 reduceRight() 将数组元素计算为一个值(从右到左)。 reverse() 反转数组的元素顺序。 shift() 删除并返回数组的第一个元素。 slice() 选取数组的一部分,并返回一个新数组。 some() 检测数组元素中是否有元素符合指定条件。 sort() 对数组的元素进行排序。 splice() 从数组中添加或删除元素。 toString() 把数组转换为字符串,并返回结果。 unshift() 向数组的开头添加一个或更多元素,并返回新的长度。 valueOf() 返回数组对象的原始值。
2023年01月11日
132 阅读
0 评论
0 点赞
2022-08-25
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'文件扩展名
2022年08月25日
502 阅读
0 评论
0 点赞
1
2
3