avatar

工作中常用方法

datas
发布时间
times4 min read

获取数组最后一位

  1. index 取值

    args[args.length - 1]
    
  2. pop 方法(改变元素组的值)

    args.pop()
    
  3. ES6 的方法(不改变原数组的值)

    let [l] = [...args].reverse()
    let result=l
    

看 vue 项目源码

// 上线的打包需要注释掉否则泄露源码
 configureWebpack: {
  devtool: 'source-map'
 }

清除网络缓存

ipconfig /flushdns

LOADSH

  1. pull(移除数组 array 中所有和给定值相等的元素)

    //移除数组array中所有和给定值相等的元素
    var array = [1, 2, 3, 1, 2, 3];
    _.pull(array, 2, 3);
    console.log(array);
    // => [1, 1]
    
    
  2. cloneDeep 深拷贝方法

    var form={a
        name:"askld",
        age:null,
        shole:undefined,
        num:12
    }
    var ff=_.cloneDeep(form)
    // var ff=JSON.parse(JSON.stringify(form))//无法拷贝undefined值
    console.log(ff);
    

查看全局配置

npm list -g --depth 0//全局npm安装的东西

Promise 链式调用方案

let someCondition=true
var promise = new Promise(function (resolve, reject) {
    if (someCondition) {  // succeed
        resolve(1);
    } else {   // fails
        reject("err");
    }
});

promise.then(function (future) {
    console.log(future);  // log 1 if someCondition = true
    return 2;
}, function (err) {
    console.log(err);  // log err if someCondition = false
}).then(function (future) {
	//链式调用会继承前.then的return值
    console.log(future);  // log 2 if someCondition = true
});

vue 使用$refs(函数)传值(不建议使用)

理论上$refs类似Jquery的Dom操作,不建议多使用,会影响数据流转,不方便排错,父子通信可以考虑prop、watch、$emit 等手段;如果层级较多还是放在store中集中管理比较好

空值

/* 是否身份证号码*/
export function validateIdNo(rule, value, callback) {
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  //为空判断
  if (value === '' || value === undefined || value == null) {

    callback()
  } else {
    if ((!reg.test(value)) && value !== '') {
      callback(new Error('请输入正确的身份证号码'))
    } else {
      callback()
    }
  }
}

或等于

match |= treeData[i][pro].includes(searchValue);

在 vue 生命周期中的同步办法

  // 原理和普通同步方法差不多  async()=>await  然后自执行函数
  (async () => {
    await this.listDictsByCode();//await里面必须返回promise对象
    this.getMenuList();
  })();
  listDictsByCode() {
    return listDictsByCode({ code: 'ActionType' }).then((result) => {
      this.dicList = {};
      result.data.forEach(el => {
        this.dicList[el.value] = { value: el.value, lable: el.text };
      });
    }).catch((err) => {
      console.log(err, 'ActionType');
    });
  },

常用 CSS

//页面禁止选择文本
-webkit-touch-callout: none;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;

//文本不换行溢出...
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

滚动条

// /deep/到想去掉滚动条地地方
  /deep/ .d2-container-full__body {
    &::-webkit-scrollbar {
      // 是否显示
      // display: none;
      width: 6px;
      padding-right: 4px;
      background-color: #fff;
    }
    &::-webkit-scrollbar-thumb {
      -webkit-border-radius: 3px;
      border-radius: 3px;
      background-color: #c6c6c6;
    }
  }
//element表格
#goods:hover .el-table__body-wrapper::-webkit-scrollbar {
  display: block !important;
  width: 6px;
  height: 6px;
}
#goods:hover .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.2);
}
#goods:hover .el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 0;
  background: rgba(0,0,0,0.1);
}

判断对象的proto

instanceof 左边可以是任意值,右边只能是函数

var res=new Blob
res instanceof Blob//true

判读对象更严谨判断长度

Object.keys(obj).length
Object.getOwnPropertyNames(obj) .concat(Object.getOwnPropertySymbols(obj)).length

监听全屏

 /* 监听窗口大小改变 */
 module.exports = function changePageWH(flag = true) {

      let pageDom = document.getElementById('page');

      let width = window.innerWidth;

      let height = window.innerHeight;

      let xp = width / 1920;

      let yp = height / 1080;

      let px = 1920 / width;

      let py = 1080 / height;

      console.log('px,py ==>', px, py);

      pageDom.style.transform = 'scale(' + xp + ',' + yp + ')';

      pageDom.style.top = (1 / 2 - py / 2) * 100 + '%';

      pageDom.style.left = (1 / 2 - px / 2) * 100 + '%';

      if (flag) {

        window.onresize = function () { changePageWH(false); }

      }

    }

深度作用选择器

深度作用选择器 >>>(注意,只作用于css)
.fuck >>> .weui-cells {
    // ...
}
/deep/ 选择器  v3更推荐::v-deep
<style lang="scss" scoped>
.select {
  width: 100px;

  /deep/ .el-input__inner {
    border: 0;
    color: #000;
  }
}
</style>