el-input type="number" 去掉上下箭头 先来看一下原图，会有一个上下箭头::v-deep input { &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none !important; } }去掉之后

js根据字节自动转化KB或MB或GB getFileSize(limit) { // 字节 // bytes --> KB --> MB -->GB var size = ""; if(limit < 0.1 * 1024){ //小于0.1KB，则转化成B size = limit.toFixed(2) + "B" }else if(limit < 0.1 * 1024 * 1024){ //小于0.1MB，则转化成KB size = (limit/1024).toFixed(2) + "KB" }else if(limit < 0.1 * 1024 * 1024 * 1024){ //小于0.1GB，则转化成MB size = (limit/(1024 * 1024)).toFixed(2) + "MB" }else{ //其他转化成GB size = (limit/(1024 * 1024 * 1024)).toFixed(2) + "GB" } var sizeStr = size + ""; //转成字符串 var index = sizeStr.indexOf("."); //获取小数点处的索引 var dou = sizeStr.substr(index + 1 ,2) //获取小数点后两位的值 if(dou == "00"){ //判断后两位是否为00，如果是则删除00 return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2) } return size; }

如何在vue中优雅的使用svg 1. svg-sprite-loadernpm install svg-sprite-loader --save2. 在src中新建文件夹iconsicons/svg 存放svg图标icons/index.js 全局注册svg组件，导入所有svg图标// icons/index.js import Vue from 'vue' import SvgIcon from '@/components/SvgIcon/index.vue'// svg component // register globally Vue.component('SvgIcon', SvgIcon) const req = require.context('./svg', false, /\.svg$/) const requireAll = requireContext => requireContext.keys().map(requireContext) requireAll(req)3. 创建svg组件// src/components/ScgIcon/index.vue <template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName" /> </svg> </template> <script> export default { name: 'SvgIcon', props: { iconClass: { type: String, required: true }, className: { type: String, default: '' } }, computed: { iconName () { return `#icon-${this.iconClass}` }, svgClass () { if (this.className) { return 'svg-icon ' + this.className } else { return 'svg-icon' } } } } </script> <style scoped> .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> 4. 在vue.config.js中使用loaderconst path = require('path') function resolve (dir) { return path.join(__dirname, dir) } module.exports = { devServer: { port: 8080, open: true }, chainWebpack (config) { // set svg-sprite-loader config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() } }5. 在main.js中导入icons/index.js// main.js import '@/icons/index' // svg6. 在页面中使用组件<SvgIcon iconClass="eye-open"></SvgIcon>直接使用svg文件名作为iconClass

el-upload自定义触发按钮及触发上传前判断 1. 在页面中引用el-upload组件<!-- 自定义按钮div --> <div v-if="routerList.length !== 1" class="action upload" :class="{action_upload_radius: routerList.length === 1}" @click="uploadHandler" > <i class="el-icon el-icon-upload"></i>上传 </div> <!-- hidden upload --> <el-upload v-show="false" class="upload-demo" :action="uploadUrl" :on-success="actionUploadSucc" :show-file-list="false" :headers="headers" :data="actUploadParams" :multiple="false" :file-list="fileList"> <el-button ref="file-home-uploadBtnRef" v-show="false"> <i class="el-icon-upload"></i>上传文件 </el-button> </el-upload>使用一个div模拟一个上传按钮，使用v-show隐藏upload组件，在upload组件的触发按钮el-button上绑定ref2. 触发前条件判断及触发upload上传方式 // action bar 上传btn uploadHandler () { console.log(this.routerList); const len = this.routerList.length if(this.routerList.length === 1) return this.$message.info('请先进入文件夹！') const currFolderId = this.routerList[len-1].folderId // 当前操作的文件夹id this.actUploadParams.folderId = currFolderId // 触发upload组件上传 this.$refs['file-home-uploadBtnRef'].$el.click() },获取到upload触发按钮el-button的ref，在获取到ref上的$el，调用click()自点击触发upload上传

ArrayBuffer和base64字符串互相转化 1. ArrayBuffer转base64function translateArrayBufferToBase64(buffer){ const bytes = new Uint8Array(buffer).reduce((data, byte) => data + String.fromCharCode(byte), '') return window.btoa(bytes); }2. base64转ArrayBufferfunction translateBase64ToArrayBuffer(base64){ const binaryStr = window.atob(base64); const byteLength = binaryStr.length; const bytes = new Uint8Array(byteLength); for(let i=0;i<byteLength;i++){ bytes[i] = binaryStr.charCodeAt(i); } return bytes.buffer; }

图片转base64 1. 使用FileReader对象FileReader对象可以异步读取File对象或者是Blob对象FileReader是一个构造函数，返回一个FileReader对象FileReader对象通过readAsDataUrl方法读取File对象或者Blob对象，一旦读取完成，result属性中会包含一个data： URL格式的Base64字符串以表示所读取文件的内容读取完成会触发FileReader对象的onload事件，可以从FileReader对象的result属性上获取返回的结果函数封装/** * 通过file对象/blob对象获取base64 * @param {Object} data file对象或者blob对象 */ const getBase64 = function (data) { return new Promise((resolve, reject) => { let imgRes = '' const reader = new FileReader() reader.readAsDataURL(data) reader.onerror = () => reject(reader.error) reader.onload = function (e) { // imgRes = e.target.result imgRes = reader.result } reader.onloadend = () => resolve(imgRes) }) }文件上传案例，并实现预览（file对象）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="file" onchange="inputChange()"> <img src="" alt="预览图片"> <script> function inputChange (e) { const file = document.querySelector('input[type=file]').files[0] getBase64(file).then((res) => { const url = res document.querySelector('img').src = url }) } /** * 通过file对象/blob对象获取base64 * @param {Object} data file对象或者blob对象 */ const getBase64 = function (data) { return new Promise((resolve, reject) => { let imgRes = '' const reader = new FileReader() reader.readAsDataURL(data) reader.onerror = () => reject(reader.error) reader.onload = function (e) { // imgRes = e.target.result imgRes = reader.result } reader.onloadend = () => resolve(imgRes) }) } </script> </body> </html>通过图片url获取文件流blob对象案例（blob对象）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <img src="" alt="预览图片"> <button onclick="getImgByUrl()">通过url获取图片blob</button> <script> function getImgByUrl() { $.ajax({ // 可能会存在跨域问题 url: 'https://p5.qhimg.com/bdr/__85/t01409d4a62e0210249.jpg', xhrFields: { responseType: 'blob' }, success: (data, status) => { getBase64(data).then((res) => { const url = res document.querySelector('img').src = url }) } }) } </script> </body> </html> 2. 使用canvas.toDataURL()封装函数/** * 通过url获取图片base64 * @param {String} url 图片地址 */ const getBase64ByUrl = function (url) { return new Promise((resolve, reject) => { let base64Url const img = new Image() // 如果图片url存在跨域需要设置该属性，并且后端也要允许跨域 img.setAttribute('crossOrigin', 'Anonymous') img.src = url img.onload = function () { const c = document.createElement('canvas') c.width = img.width c.height = img.height const ctx = c.getContext('2d') ctx.drawImage(img, 0, 0, c.width, c.height) base64Url = c.toDataURL() resolve(base64Url) } img.onerror = function () { reject(base64Url) } }) }

git仓库迁移后本地git如何修改远程git地址 修改git远程仓库地址第一种：使用修改命令git remote origin set-url [url]第二种：先删除，再添加git remote rm origin git remote add origin [url]第三种：修改config文件push时要注意先拉取远程地址的分支合并到本地，不然可能会出现一系列问题，报错原因忘记复制了就不贴了git pull origin master // 拉取远程master分支到本地master分支 git pull origin dev_wrz // 拉取远程dev_wrz分支到本地dev_wrz分支

git使用手册 git 使用方法：先创建一个文件夹在文件夹里边 右键 打开git窗口输入 git init 将当前文件夹 作为一个 仓库输入 git add . 将所有文件添加到暂存区输入 git commit -m "注释" 提交到本地仓库再输入 git remote add origin https://gitee.com/wrz666/wr.git 将这个仓库绑到码云 这个 云端 可以使用 gitHub 码云通过git push -u origin master 将仓库里边的 文件上传到 云端git 语法：git init 将文件夹创建成一个本地仓库git add . / 文件名 将 文件添加到暂存区git reset head 文件名 将文件从暂存区移除git commit -m "注释" 将文件 提交到 本地仓库git commit -a -m 直接跳过暂存区提交到本地仓库 只对 已修改状态的文件有用 未跟踪的无效git rm --cached 文件名 将文件从仓库中删除git rm -f 文件名 将本地 和仓库中 一起删除git log 查看当前文件之前的历史 显示 commit id号git log --pretty=online 历史在一行上显示git reflog 查看所有的历史 显示 commit id号git reflog --pretty=online 历史在一行上显示git reset --hard [id号] 将版本切换到对应id的那个版本git branch 查看所有的分支git branch 分支名称 创建一个分支git branch -d 分支名称 删除本地分支git checkout 分支名称 切换到这个分支git checkout -b 分支名称 创建并且切换到这个分支git merge 分支名称 合并这个分支(一般切换到主分支 在合并其他分支)git remote add 云端仓库别名（origin）云端仓库url地址 将本地仓库和云端仓库绑定git push -u 云端仓库别名（origin） 分支名称 将这个分支上传到云端仓库git remote show 远端仓库别名（origin） 查看云端仓库所有的分支git checkout 分支名称 云端仓库名称/分支名称 将云端仓库中的分支 下载到本地git pull 拉取云端最新的代码 下载到本地对应的分支git push 云端仓库别名（origin） --delete 分支名称 删除云端仓库中的这个分支git clone 地址

javascript高级程序设计 第四版 中文高清 pdf 书中详尽讨论了 JavaScript 的各个方面，从 JavaScript 的起源开始，逐步讲解到新出现的技术，其中重点介绍 ECMAScript 和 DOM 标准。在此基础上，接下来的各章揭示了 JavaScript 的基本概念，包括类、期约、迭代器、代理，等等。另外，书中深入探讨了客户端检测、事件、动画、表单、错误处理及 JSON。本书同时也介绍了近几年来涌现的重要新规范，包括 Fetch API、模块、工作者线程、服务线程以及大量新 API。

移动端适配（rem） 1. postcss-pxtorem该插件可以将项目中的px值转化为rem，注意：行内样式不会转化npm install postcss-pxtorem -D在项目根目录创建文件 .postcssrc.js 或 postcss.config.js// postcss.config.js module.exports = { plugins: { // 用到的插件都配置在这里 'postcss-pxtorem': { rootValue: 37.5, // 1rem = 37.5px rem基准值 750设计稿就改为 75 propList: ['*'], // 配置要转换的css属性 * 表示所有属性 }, }, }; module.exports = { plugins: { // postcss-pxtorem 插件的版本需要 >= 5.0.0 'postcss-pxtorem': { rootValue({ file }) { // Vant中是根据375来写 如果我们的不是，就需要使用 函数的形式做判断 return file.indexOf('vant') !== -1 ? 37.5 : 75; }, propList: ['*'], }, }, };2. lib-flexible该插件可以根据屏幕动态的设置html的font-size大小默认会将屏幕分成十份，然后给html的font-size， 比如屏幕宽度 750px 那么html的font-size就是 75px1rem = 75pxnpm install lib-flexible// 在main.js中导入 import 'amfe-flexible'