js中常用代码

1、vue 路由 编程式导航

分为path和name两种方式。
1、path 传参 ：参数会带到url地址栏，刷新地址依然存在。
2、name 传参 ：参数不会带到url地址栏，刷新地址就没了。
3、path 需要加斜杠，name不需要加斜杆。

//path 传参
this.$router.push({
     path: "/index",
     query: {
          id,
     }
});
//path 传参 接收方式：
let Id = this.$route.query.id;

//name 传参
this.$router.push({
     name: "index",
     params: {
          id,
     }
});
//name 传参 接收方式：
let Id = this.$route.params.id;

2、把 /n 替换成

valuet.replace(/\r?\n/g,"
")

3、随机取数组中的颜色

data(){
 return{
  bgColor:["#8dffaa", "#f6d953", "#ef666a", "#6ed4f9", "#5589ff", "#c331c1"],
 }
},
methods:{
 randomRgb(){ //随机取数组中的颜色
      let valueColor = this.bgColor;
      let bGcolorRandom = valueColor[Math.floor((Math.random()*valueColor.length))];
      return bGcolorRandom;
    }
}

4、判断是电脑还是手机

data(){
 return{
 }
},
methods:{
 isMobile() { //判断是不是手机端
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return flag;
},
},
mounted() {
    if (this.isMobile()) { //手机端
    } else {//pc端
    }
}

5、判断是苹果手机还是安卓手机

data(){
 return{
 }
},
methods:{
  isMobile() {
            let u = navigator.userAgent;
            let isiOS  = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            let isAndroid = isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
            if(isiOS){
                return false; //ios
            }else if(isAndroid){
                 return true; //android
            }
  }
},
mounted() {
    if (this.isMobile()) {
      //android
    } else {
      //ios
    }
}

6、vue 过滤器 传多个值

 

{{item.StartTime | timeFilters(item.EndTime)}}
 

7、将时间戳转换成 YYYY-MM-DD HH:MM:SS 的格式

传入 1631866873000 得到 2021-09-17 16:21:13

 

    
{{item.StartTime | timeFilters}}
    
{{item.EndTime | timeFilters}}
 

8、截图url地址上面的参数

例如：http://localhost:8888/#/?ticket=123456&userid=123456

效果：

image.png

9、截取url地址 有中文的情况

 function getRequest() {   
            var url = window.location.search; //获取url中"?"符后的字串   
            var theRequest = new Object();   
            if (url.indexOf("?") != -1) {   
                var str = url.substr(1);   
                strs = str.split("&");   
                for(var i = 0; i < strs.length; i ++) {  
                    theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);
                }   
            }   
            return theRequest;   
        }
        console.log(getRequest())

image.png

10、判断是否在微信打开

data(){
 return{
 }
},
methods:{
      is_weixn(){ 
          let ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { return true; } else { return false; } 
        },
  }
},
mounted() {
    if (this.is_weixn()) {
      //在微信中打开
    } else {
      //不是在微信中打开
    }
}

11、复制

 复制

 copy(data) {
      //创建一个input元素
      let input = document.createElement('input') 
      //给input的内容复制
      input.value = data   
      // 在body里面插入这个元素
      document.body.appendChild(input)   
      // 选中input里面内容
      input.select()  
      //执行document里面的复制方法
      document.execCommand("Copy") 
      // 复制之后移除这个元素
      document.body.removeChild(input)
       this.$message({
            type: 'success',
            message: '复制成功，请在浏览器打开'
        });
    },

12、转千分位格式。保留或不保留小数

效果：

image.png

不保留小数

        toMoney(num) { //转千分位格式 不保留小数
            if (num && num != 'error') {
                num = parseFloat(num).toFixed(0);
                num = parseFloat(num);
                num = num.toLocaleString();
                return num;
            } else {
                return '0';
            }
        },

保留小数后两位

 toMoney(num) { //转千分位格式 ，保留小数后两位
        if (num && num != 'error') {
            num = num.toString();//首先数字转字符串，才能检测是否包含小数点
           if (num.indexOf(".") == -1) {  //等于-1表示 没有小数点
              num = parseFloat(num);
              num = num.toLocaleString();
              return num +'.00'; //没有小数点，就拼接小数点
           }else{ //有小数点，直接转千分位
              num = parseFloat(num).toFixed(2);//保留两位小数点
              num = parseFloat(num);
              num = num.toLocaleString();
              return num;
           }
        } else {
            return '0';
        }
    },
      

13、保留小数点 和 以逗号分割成数组

        toFloat(num) { //保留小数点后两位
            num = parseFloat(num).toFixed(2);
            return num;
        },
        splitArr(value) { //以逗号分割成数组
            if (value) {
                var newValue = []
                newValue.push(value.split(','))
                return newValue[0]
            } else {
                return ''
            }
        },

14、iOS手机上input输入框无光标，不能输入文字。

看看自己的样式中 ，有没有这段代码，有的话 就去掉。
或者 把-webkit-user-select的值设置成auto即可解决。

• {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;/文本不能被选择/
  }

15、根据长数组将短数组补齐

image.png

16、vue节流防抖