获取地址栏参数

①JavaScript 中有一个 URL 对象，通过它可以非常方便的获取 URL 中的参数。

const getParamByUrl = (key) => { 
    const url = new URL(location.href) 
    return url.searchParams.get(key) 
}

②

function GetQueryString(name){
    // 解决参数值乱码
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURI(r[2]); return null;
}

只在关闭浏览器时清除localStorage

window.onbeforeunload = function () { //即将离开当前页面(刷新或关闭)时执行              if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey){  
        var storage = window.localStorage;   storage.clear() 
} }

滚动到底部请求接口

    mounted(){
     　　window.addEventListener('scroll',this.debounce(this.handleScroll,500))
　　}，

　　methods:{
        debounce(fn, wait) { //节流方法
             var timeout = null;  // 初始化定时器
                return function() {
                  if(timeout !== null)   clearTimeout(timeout);  // 如果scroll方法反复触发，则清空定时器
                  timeout = setTimeout(fn, wait);  // 如果方法没有反复触发，那么就调用我们判断滚动的方法，然后去调用数据，他就只会请求一次了
                }
         },
    handleScroll(){
  　　    if(this.isAtBottom) return;
  　　    let scrollTop = document.documentElement.scrollTop  // 屏幕滚动高度
  　　    let innerHeight = document.querySelector('#app').clientHeight  // 容器高度
  　　    let outerHeight = document.documentElement.clientHeight  // 屏幕高度
  　　    if (outerHeight + scrollTop >= innerHeight+10) {
     　　       // getData() 这里就可以去请求数据了
  　　            }
　　         }
   },
   lazyLoading () { // 滚动到底部，再加载的处理事件
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  //网页被卷去的高
            sessionStorage.setItem("scrollTop",scrollTop)
            let clientHeight = document.documentElement.clientHeight; //网页可见区域高
            let scrollHeight = document.documentElement.scrollHeight; //网页正文全文高
            if (scrollTop + clientHeight >= (scrollHeight - 200)) { // 滚动到底部
    }},

点击div之外触发事件

<div v-clickoutside="clickoutsideDiv"></div>
methods:{
    clickoutsideDiv(){ this.show = false }
}
directives: {
    clickoutside: { // 初始化指令
      bind(el, binding, vnode) {
        function documentHandler(e) {
          // 这里判断点击的元素是否是本身，是本身，则返回
          if (el.contains(e.target)) {
            return false;
          }
          // 判断指令中是否绑定了函数
          if (binding.expression) {
           // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
            binding.value(e);
          }
        }
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener('click', documentHandler);
      },
      update() {},
      unbind(el, binding) { // 解除事件监听
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
      }
   }
}

watch监听query变化请求数据

watch: {
    '$route':{
        immediate: true,
        handler: function(to,form) {
        ... } } }

弹框显示组件重新渲染

通过vue key 实现，原理[官方文档](cn.vuejs.org/v2/guide/li… 值变更时，会自动的重新渲染。

<template>
    <third-comp :key="menuKey" />
</template>

ios 火狐日期格式兼容

('2020-01-02').replace(/-/g, "/"); //投票结束时间 ios new Date()不支持 - 连接 ('2020/01/02').replace(///g, "-");

遍历字符索引数组

for (var key in msgs) { }

el-table全选反选

全选this.$refs.listTalbe.toggleAllSelection()

反选this.people_list.forEach((item) => { this.$refs.listTalbe.toggleRowSelection(item,false)})

根据参数升序

var arr = [
    {name:'zopp',age:0},
    {name:'gpp',age:18},
    {name:'yjj',age:8}
];
function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}
console.log(arr.sort(compare('age')))

Math.random()随机数

包括下线数字（lower）不包括上限数字（upper）

Math.floor(Math.random()*(upper-lower)) + lower

包括下线数字（lower）包括上限数字（upper）

Math.floor(Math.random()*(upper-lower+1))+lower

产生随机颜色

① #${Math.floor(Math.random()*0xffffff).toString(16)}

② rbg(${random(0,256)},${random(0,256)},${random(0,256)})

全局filters

Object.keys(filters).forEach(key => Vue.filter(key, filters[key]))

png等格式图片转为data:image格式

            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext('2d'),
            var img = new Image();
            img.src="./images/arrow05.png";
            //img.setAttribute('crossOrigin', 'anonymous')  // 图片跨域时有用
            img.onload = function(){
                canvas.height = img.height;
                canvas.width = img.width;
                ctx.drawImage(img,0,0);
                dataURL =canvas.toDataURL("image/png");
                $('#img').attr('src', dataURL);
                console.log(canvas.toDataURL("image/png"))
            };

文件流导出为excel

① method

 function exportExcel(excel, title) {
  const filename = `${title}.xlsx`; // 拼接文件名
  const blob = new Blob([excel]); //创建一个新的 Blob 对象
  const url = window.URL.createObjectURL(blob); //  把一个blob对象转化为一个Blob URL，创建下载链接
  const downloadLink = document.createElement("a"); // 生成一个a标签
  downloadLink.href = url;
  downloadLink.download = filename; // // dowload属性指定下载后文件名
  document.body.appendChild(downloadLink); //将a标签添加到body中
  downloadLink.click(); // 点击下载
  document.body.removeChild(downloadLink); // 下载完成后移除元素
  window.URL.revokeObjectURL(url); // 释放掉blob对象
}

② 设置responseType

export function ExportApi(params) {
  return request({
    ....
    responseType: "blob"
  })
}

整理-JS篇