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 替换成 </br>

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

3、随机取数组中的颜色

<i :style="'background-color:'+randomRgb()"></i>

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 过滤器 传多个值

 <div>
{{item.StartTime | timeFilters(item.EndTime)}}
 </div>
<script>
 filters: {//过滤器 接收多个值
    timeFilters(startTime,endTime){
        console.log('startTime,endTime',startTime,endTime)
    }
  },
</script>

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

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

 <div>
    <p>{{item.StartTime | timeFilters}}</p>
    <p>{{item.EndTime | timeFilters}}</p>
 </div>

<script>
const padDate = function (value) {
    return value < 10 ? `0${value}` : value;
};
export default {
 filters: {//过滤器 过滤时间
    timeFilters: function (value) {
        const date = new Date(value);
        const year = date.getFullYear();
        const month = padDate(date.getMonth() + 1);
        const day = padDate(date.getDate());
        const hours = padDate(date.getHours());
        const minutes = padDate(date.getMinutes());
        const seconds = padDate(date.getSeconds());
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
}
</script>

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

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

<script>
export default {
  data() {
    return {};
  },
  methods: {
    urlValue(url) {
      var urlObj = new Object();
      if (url.indexOf("?") != -1) {
        var urlSplit = url.split("?")[1];
        var str = urlSplit.substr(0); //substr()方法返回从参数值开始到结束的字符串；
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          urlObj[strs[i].split("=")[0]] = strs[i].split("=")[1];
        }
        console.log("url", urlObj); //此时的urlObj就是需要的参数；
        this.urlPath = urlObj;
      }
    },
  },
  mounted() {
     this.urlValue(window.location.href)
  }
};
</script>

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())

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、js复制内容

 <span @click="copy('参数')">复制</span>

 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、转千分位格式、保留或不保留小数

 不保留小数：

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