1、wap端滑动时侧边栏隐藏//aside需添加transition属性 $('body').on('touchmove', function (event) { $('aside').css('right','-1rem') }) $('body').on('touchend', function (event) { $('aside').css('right','0') })2、less 循环背景图.Loop(@index) when(@index<=8) { // 执行内容 // 类名参数要加大括号@{index} // 根据index获取对应的某个值 extract(数组名, 对应的序号) &:nth-child(@{index}) { background-image: url("../images/aj_bg0@{index}.png"); } //递归调用 达到循环目的 .Loop(@index+1); } // 调用循环 .Loop(0);3、vscode正则匹配</span>(\s*(?=\r?))<span> ———— 匹配标签间的所有空白字符 (?<!link rel="stylesheet") href="([\w\W]+?)" ———— 匹配所有href=""的内容，除了link rel="stylesheet"4、css限制显示行数，超出部分加上...chrome.textRow(@row) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: @row; //需要显示时文本行数 overflow: hidden; }ie兼容 // 处理多行文本超出部分隐藏 function wordLimit(cName, wordLength) { var cName = document.getElementsByClassName(cName); for (var i = 0; i < cName.length; i++) { var nowHtml = cName[i].innerHTML; var nowLength = cName[i].innerHTML.length; if ( nowLength > wordLength) { cName[i].innerHTML = nowHtml.substr(0, wordLength) + '…'; } } };5、样式重置小问题移动端样式重置需要加上font-size，不然会有默认字体大小*{ font-size: 0.24rem }6、axios的post请求axios的post请求，默认是以application/x-www-form-urlencoded发送的，而一般接口接收都只能接收application/json，因此传输的data数据需要通过qs.stringify进行转换（前提是需先安装qs并引入）axios.create({ method: 'POST', url: '***', headers: { 'content-type': 'application/x-www-form-urlencoded' }, data: qs.stringify(data) })7、css竖排文字兼容问题准备做一个数字在框里自增的效果，需要用到文字竖排显示，原本用的writing-mode:lr-tb，实践发现存在兼容性问题，然后设置宽度文字并没有自动换行，因此只能用笨办法，内容里添加br标签达到目的8、通过正则将内容换成*，保留头和尾str.replace(/^(.).*(.)$/, '$1***$2')9、axios携带cookie的方法 封装的js里添加axios.defaults.withCredentials = true 这个属性,这样发请求时会自动携带cookie，但是需要后端在接口配置上允许携带cookie才能生效10、合理使用props中的值的方法如果props中的值涉及到多次更改，而调用他的值又是个对象的话，应该把对象放到computed中，否则没有办法实时监听props: { value: { type: String }, code: { type: String, default: 'cform_picture_control' }, ownId: { type: String, default: 'f3e28bd96ea2b32b361bd3e4690a1f6' }, selectType: { type: String, default: 'primary' }, portrait: { type: Boolean, default: false }, preview: { type: Boolean, default: true }, deleted: { type: Boolean, default: false }, limit: { type: Number, default: 10 }, exclude: { type: String, default: '' } }, //放到data中会监听不到后面的变化 data() { return { attrs：{ code: this.code, ownId: this.ownId, // 业务id selectType: this.selectType, portrait: this.portrait, // extendCode: '', //autoUpload: false, //preview: true, download: true, dragSort: true, limit: Number(this.limit), exclude: this.exclude, preview: this.preview, deleted: this.deleted } } }， // computed中才会实时监听变化 computed: { attrs() { return { code: this.code, ownId: this.ownId, // 业务id selectType: this.selectType, portrait: this.portrait, // extendCode: '', //autoUpload: false, //preview: true, download: true, dragSort: true, limit: Number(this.limit), exclude: this.exclude, preview: this.preview, deleted: this.deleted }; } },

1、路由跳转变量修改问题想实现根据路由名称的不同修改变量registerRoute的状态，从而通过这个变量来控制某一组件的显示与隐藏因为是在模板文件中添加的，先直接尝试将data中变量设置为registerRoute:this.$route.name === 'gszc'?true:false，然后发现行不通，因为模板文件中路由跳转时页面未刷新，因此data中值的改变并不会立即更新视图，所以需要将修改的方法放在updated钩子函数中，如此点击链接跳转路由时视图就会立即更新了... updated(){ this.registerRoute = this.$route.name === 'gszc'?true:false }2、mand mobile中swiper组件事件监听问题如果要给swiper内部的元素添加事件监听，需要在md-swiper标签上添加is-prevent="false"，因为他默认为true，不设置的话将会阻止默认的事件3、elementUI中el-select传值为对象的问题业务有一个添加和编辑表单的功能，后端要求通过表单接收两个值，一个部门ID一个部门名字，且要求这俩值与其他属性平级，因此将select的option的value绑为一个对象，在提交的方法里再将value的值取出，放入表单的对象中进行传值，el-select中识别对象的标识仅需要添加value-key即可，添加功能没啥问题编辑时需要接受后端传来的值，我本来的想法是将接收到的值处理成和option绑定value一样的对象，但发现死活渲染不上，然后通过console比对俩对象，发现根本不相等，接着就想到根据接收到的部门ID获取当前部门在options数组中的下标，然后将数组中对应下标的对象绑定到v-model，这样就能成功渲染了4、父级html给子级iframe传值跨域问题父级使用PostMessage传值给子document.getElementById('iframe').contentWindow.postMessage('message', '*') //message为传过去的数据，字符串、对象、数组均可，*代表任意域名子级使用window.addEventListener接受数据window.addEventListener('message', function(e){ console.log(e.data) })由于子级iframe加载较慢，使用PostMessage发送数据时要等子级加载完成后方能发送，否则发过去子级也接收不到，因此需要将代码写在window.onload中(此bug困扰我接近1天，实在不应该)5、vue中关于路由拦截与组件生命周期的顺序问题router.beforeEach会比组件的周期先执行，我在组件的destroyed周期中执行了函数，本以为会是它先销毁再执行路由拦截中的方法，没想到是先执行路由拦截的方法，再执行组件的生命周期路由跳转时组件之间的生命周期顺序，先执行to组件的beforeCreate,created,beforeMount以后再执行from组件的destroyed，接着才是to组件的mounted6、vue项目中的代理配置问题vue2的代理配置在vue.config.js中，配置好后axios的baseUrl路径也应该改成'/api'(如果代理配置的前缀是/api的话)，如果baseUrl的路径为全路径的话代理将会不起作用7、点击提交按钮时页面刷新的问题提交按钮的button位于form标签中，没有加type，所以表单会执行提交操作，会刷新页面，需要给button加上type="button"阻止默认提交事件8、换行相关问题在内容中添加\n进行换行时，页面并未渲染\n字符，但也没有换行效果，这里需要给他的父级css加上white-space:pre-line属性，这样就可以生效了9、浏览器preview和response的值不一致浏览器会自动把response中的值转成JSON格式，再显示到preview中，然而JavaScript存在数字精度问题，因此当接口的值（例如id）是多位数字而不是字符串时，转换时会出现数字不一样的问题，因此要以response的值为准