vue项目接手

第一次做vue项目，项目中遇到的问题以及学到的知识点汇总。

1、使用async函数

在ES7标准中新增了async和await关键字，作为处理异步请求的一种解决方案，实际上是一个语法糖，在ES6中已经可以用生成器语法完成同样的操作，但是async/await的出现使得用这样的方式处理接口异步请求更加简单和明白。

async/await语法

async submitForm() {
  const params = Object.assign({}, this.actionForm);
  try {
    await this._confirm(`确认审核通过?`); //await 关键字只能在async中使用
    await this.$scmApi.shenheSuccess(params);

    this.successMsg("提交成功");
  } catch (e) {
    this.loading = false;
  }
},

2、路由跳转

this.$router.push({

  name: "app-store-product",	//跳转到app/store/product/index.vue中

  params: {

    id: row.id //携带参数？

  }

});

3、::v-deep 页面样式增加权重

（注）/deep/（报错） 和 >>> 在使用scss等模板时编译可能会报错

<style lang="scss" scoped>
::v-deep .switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
::v-deep  .switchStyle .el-switch__label--left {
  z-index: 9;
  left: 20px;
}
::v-deep  .switchStyle .el-switch__label--right {
  z-index: 9;
  left: 0;
}
</style>

4、number-precision操作数字计算

npm install number-precision --save


import NP from 'number-precision'

NP.strip(num)         // strip a number to nearest right number
NP.plus(num1, num2, num3, ...)   // addition, num + num2 + num3, two numbers is required at least.
NP.minus(num1, num2, num3, ...)  // subtraction, num1 - num2 - num3
NP.times(num1, num2, num3, ...)  // multiplication, num1 * num2 * num3
NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3
NP.round(num, ratio)  // round a number based on ratio

NP.strip(0.09999999999999998); // = 0.1
NP.plus(0.1, 0.2);             // = 0.3, not 0.30000000000000004
NP.plus(2.3, 2.4);             // = 4.7, not 4.699999999999999
NP.minus(1.0, 0.9);            // = 0.1, not 0.09999999999999998
NP.times(3, 0.3);              // = 0.9, not 0.8999999999999999
NP.times(0.362, 100);          // = 36.2, not 36.199999999999996
NP.divide(1.21, 1.1);          // = 1.1, not 1.0999999999999999
NP.round(0.105, 2);            // = 0.11, not 0.1

5、身份证等*号处理

function idCard(nums){
	cosnt card = nums.replace(/(.{3}).*(.{3})/,'$1**** **** ****$2')
	return card
}