js截取字符串长度，添加省略号（...） {callout color="#f0ad4e"}js处理字符串长度，长度超出，使用‘...’代替超出部分{/callout}/** * @description 根据长度截取先使用字符串，追加… * @param {string} str 对象字符串 * @param {string} len 目标字节长度 * @returns {string} 处理好的字符串 */ export function cutString(str, len = 13) { if (!str) return '' //length属性读出来的汉字长度为1 if(str.length*2 <= len) return str var strlen = 0 var s = "" for(var i = 0;i < str.length; i++) { s = s + str.charAt(i) if (str.charCodeAt(i) > 128) { strlen = strlen + 2 if(strlen >= len){ return s.substring(0,s.length-1) + "..." } } else { strlen = strlen + 1 if(strlen >= len){ return s.substring(0,s.length-2) + "..." } } } return s; }

el-cascader选择任意一级搭配懒加载使用，单选框radio不会触发懒加载 1. 问题如图单选按钮点击后，没有进行懒加载，直接显示空数据2. 解决给el-cascader绑定change事件，手动调用lazyLoad方法<!-- 选择文件夹 --> <el-dialog title="选择文件夹" :visible.sync="dialogVisible" width="30%" append-to-body > <div class="" v-if="dialogVisible"> <span>文件夹：</span> <el-cascader class="cyupload-cascader" ref="folder-cascader-ref" :props="props" :show-all-levels="false" @change="change" clearable > </el-cascader> </div> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="sureBtn">确 定</el-button> </span> </el-dialog>// 级联状态变化 change (val) { // console.log(val); console.log(this.$refs['folder-cascader-ref'], 'ref'); this.folderId = val[val.length - 1] // this.$refs['folder-cascader-ref'].dropDownVisible = false // 关闭面板 const selectNode = this.$refs['folder-cascader-ref'].getCheckedNodes()[0] // node节点 if (selectNode && !selectNode.loaded) this.$refs['folder-cascader-ref'].$refs['panel'].lazyLoad(selectNode) // 选中加载 },3. 成功效果图

后端数据大数字精度缺失问题 1. 使用json-bigintnpm i json-bigint2. 如何使用import axios from 'axios' import jsonBig from 'json-bigint' // create an axios instance const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url // withCredentials: true, // send cookies when cross-domain requests timeout: 5 * 1000, // request timeout // 在响应数据前处理该数据 transformResponse: [function (data) { try { // 如果转换成功则返回转换的数据结果，会将大数字转换为bigint console.log(jsonBig.parse(data), 888); return jsonBig.parse(data) } catch (err) { // 如果转换失败，则包装为统一数据格式并返回 return { data } } }] })2. 使用时，将该字段转换为字符串res.data.pid.toString() // 4125411516516488

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分支