随手记-不定期更新

  • 求数组元素最大值及其下标
var arr = [3,6,-7,6,4,1];
console.log(Math.max.apply(null,arr));// 最大值
console.log(arr.indexOf(Math.max.apply(null,arr)));// 最大值的下标
  • vue监听当前URL变化
mounted() {
      const _this = this;
      // 监听URL变化
      window.addEventListener('hashchange', function(){
      	// 根据需求... 
        let obj = {
          stuuids: _this.$route.query.stuuids,// 获取URL中的新值
          accessno: _this.$route.query.accessno,
          areacode: _this.$route.query.areacode,
        };
        _this.getStudyDetails(obj);// 调用接口
      })
    },
  • vue监听窗口变化
data(){
	return {
		// 定义高度并设置初始值
		tableHeight: document.documentElement.clientHeight - 10
	}
},
 mounted() {
      const that = this;
      // 监听窗口变化
      window.onresize = function temp() {
      	// 重新赋值
        that.tableHeight = document.documentElement.clientHeight - 10;
      }
    },
  • 新标签页跳转路由
	const {href} = this.$router.resolve({
            path: '/new',
            query: {
              a: 0,
              b: 1,
              c: 2
            }
          });
          window.open(href, 'windows');
  • position: fixed 定位可水平滚动
// header 水平滚动 absolute效果
window.onscroll=function(){
    var sl=-Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
    document.getElementById('fixed').style.left=sl+'px';
}
  • 中文A-Z排序(限仅存在中文)
// localeCompare
	var str="红红,曹操,张三,阿里,女孩,酒肆";
    str=str.split(",");
    str.sort(function(a,b){
        return a.localeCompare(b);
    })
    console.log(str);// ["阿里", "曹操", "红红", "酒肆", "女孩", "张三"]
  • 页面滚动条css样式修改
  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }

  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    -webkit-box-shadow: #ffffff;
    background: #ffffff;
  }

  :hover::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: hsla(220, 4%, 80%, .5);
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
  }
  • 替换页面url不刷新页面
	// 例:http://localhost:8080/#/work/radiation?id=159116
	// 注:
    let url= window.location.href;
    let id = url.split('=')[1];
    if (url.indexOf("id") != -1) {
    	// 替换url中id不刷新页面
       history.replaceState(null, null, url.replace(id , '111111'));
    }

详见HTML5 history.pushState()和history.replaceState()新增、修改历史记录用法介绍

  • 控制div内的滚动条的位置
	// 注:vue中使用时需要在mounted生命周期中设置
	document.getElementById('id').scrollTop = 100; // scrollTop控制垂直滚动条位置
	document.getElementById('id').scrollLeft=100; // scrollLeft控制水平滚动条位置
  • 特殊字符正则验证
// 空格等特殊符号
let regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
          regCn = /[·!#¥(——):;“”‘、,|《。》?、【】[\] 	]/im;
  • push failed: unable to access
//系统证书问题,系统判断这个行为会造成不良影响,所以进行了阻止,只需要设置跳过SSL证书验证即可
1.在当前项目根目录中打开Git
2.运行git config --global http.sslVerify false
  • 解决webpack打包导致多行省略号样式中的 -webkit-box-orient 失效失效
.line-ellipsis-2{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
 /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  • 数组对象去重
let data = [
		    { id: 201801, name: '张三', age: 15, },
			{ id: 201804, name: 'John', age: 18, },
			{ id: 201802, name: '李四', age: 18, },
			{ id: 201801, name: '张三', age: 15, },
			{ id: 201805, name: 'Jack', age: 18, },
			{ id: 201803, name: '王五', age: 10, },
			{ id: 201805, name: 'Jack', age: 18, },
		    { id: 201804, name: 'John', age: 18, },
			{ id: 201805, name: 'Jack', age: 18, },
        ];
--------------------- 
let hash = {}; 
data = data.reduce((preVal, curVal) => {
	hash[curVal.id] ? '' : hash[curVal.id] = true && preVal.push(curVal); 
	return preVal 
}, [])
--------------------- 
版权声明:本文为CSDN博主「xum222222」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/XuM222222/article/details/80657316
  • 深度拷贝对象
let deepCopy1 = function (source) {
       var result = {};
       for (var key in source) {
         result[key] = typeof source[key] === 'object' ? deepCopy1(source[key]) : source[key];
       }
       return result;
  };
  • 解决Chrome记住密码后黄色背景
input:-webkit-autofill {
       -webkit-box-shadow : 0 0 0 1000px white inset; // 变白色
}
  • 根据数组中对象的某个属性值进行去重(ES6)
var arr = [{
  	from:'张三',
  	to: '河南'
  },{
    from:'王二',
    to: '阿里'
  },{
    from:'王二',
    to: '杭州'
  },{
    from:'王二',
    to: '山东'
  }]
//有如上数组,想根据数组中的对象的from属性进行去重,如果from一样的话,重复只保留一条。根据ES6属性编写函数代码如下:
 
function unique(arr) {
  	const res = new Map();
  	return arr.filter((a) => !res.has(a.from) && res.set(a.from, 1))
  }
  • 格式化时间差
function timeFn(dateDiff) {
    var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
    var leave1=dateDiff % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
    var hours=Math.floor(leave1 / (3600 * 1000))//计算出小时数
    //计算相差分钟数
    var leave2=leave1 % (3600*1000)    //计算小时数后剩余的毫秒数
    var minutes=Math.floor(leave2 / (60 * 1000))//计算相差分钟数
    //计算相差秒数
    var leave3=leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
    var seconds=Math.round(leave3 / 1000)

    var leave4=leave3 % (60 * 1000)      //计算分钟数后剩余的毫秒数
    var minseconds=Math.round(leave4 / 1000)
    var timeFn = "耗时:"+dayDiff+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒"+minseconds+"毫秒";
    return timeFn;
}
  • base64图片转文件 (blob)
  function convertBase64UrlToBlob(urlData) {
    var bytes = window.atob(urlData.split(',')[1]);        //去掉url的头,并转换为byte
    //处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
      ia[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab], {type: 'image/png'});
  }
// 使用model, 这儿2个属性,
// prop属性说,我要将msg作为该组件被使用时(此处为子组件被父组件调用)v-model能取到的值
// event说,我emit ‘input’ 的时候,参数的值就是父组件v-model收到的值 如:
    model: {
   		prop: 'value',
    	event: 'cc'
    },
    props:{
    	msg:""
    },
    methods:{
    	// 方法调用
     	init(msg){
     		this.$emit('cc', msg)
		}
	}

方法一:

在 store/index.js 里面,就是上文特别强调了的那个文件,去掉 createSharedMutations 插件

import Vue from 'vue'
import Vuex from 'vuex'

import { createPersistedState, createSharedMutations } from 'vuex-electron'

import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
  modules,
  plugins: [
    createPersistedState(),
    createSharedMutations() // 注释掉这一行
  ],
  strict: process.env.NODE_ENV !== 'production'
})

方法二 找到 /src/main/index.js,在前面加上一句
https://github.com/vue-electron/vuex-electron#installation
在这里插入图片描述

  • PDF隐藏下载预览等工具栏
PDF路径 + #toolbar=0
  • js for循环中的回调同步问题
// 方法一:使用 async 和 await
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
(async function loop() {
    for (let i = 0; i < 10; i++) {
        await delay(Math.random() * 1000);
        console.log(i);
    }

//  方法二: 使用Promise
let p = Promise.resolve(); 
for (let i = 0; i < 10; i++) {
    p = p.then(_ => new Promise(resolve =>
        setTimeout(function () {
            console.log(i);
            resolve();
        }, 1000)
    ));
}
  • 解决chrome浏览器打印时背景色丢失
-webkit-print-color-adjust: exact;
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页