工作小技巧集锦

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
    };
  }
},