工作随手笔记

---

1.缓存$route

//缓存$route
getParamsObj(){//判断标签页打开方式
	let params = this.$route.params;
	let storageName=this.$route.name;
	let getRouteParams={};
	if(Object.keys(params).length){
	sessionStorage.setItem(storageName,JSON.stringify(params));
	getRouteParams=params;
	}else{
	let getSorage = sessionStorage.getItem(storageName);
	if(getSorage){
	   getRouteParams = JSON.parse(getSorage)
	}
	}
	return getRouteParams;
 },
 Object.assign(this.$route.params, this.getParamsObj())

2.字体大小自适应

//字体自适应大小
fontSize(res){
      let docEl = document.documentElement,
          clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 1920);
      return res*fontSize;
  },

3.git操作pull，push等操作报错ssl

git config --global http.sslVerify false

4.日期格式化

//日期格式化
DateToformatDate(date, fmt) {
      //按格式返回当前时间
      if (fmt == '' || fmt == null) {
          fmt = 'YYYY-MM-DD';
      }
      if (date == '' || date == null) {
          date = new Date();
      } else {
          if (Object.prototype.toString.call(date) !== '[object Date]') {
              date = new Date(date);
          }
      }
      var o = {
          "M+": date.getMonth() + 1, //月份
          "D+": date.getDate(), //日
          "H+": date.getHours(), //时
          "m+": date.getMinutes(), //分
          "s+": date.getSeconds(), //秒
      };
      if (/(Y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
      for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      return fmt;
  },

5.echarts显示暂无数据等（设置title属性）

title: {
     text: '暂无数据',
     x: 'center',
     y: 'center',
     textStyle: {
         color: '#8c8c8c',
         fontWeight: 'normal',
         fontSize: 16
     }
},

6.获取前一天年月日

//获取年月日
getDay(){
   let preDate = new Date();
   let date = new Date(preDate.getTime() - 24*60*60*1000);
   let year = date.getFullYear();
   let month = date.getMonth() + 1;
   let day = date.getDate();
   month = (month.toString().length == 1) ? ("0" + month) : month;
   day = (day.toString().length == 1) ? ("0" + day) : day;
   let toDay = year + '-' + month + '-' + day;
   //时间选择器的年月日
   this.dataForm.stopDate = toDay;

7.监听高度

<el-card :style="{'height':boxHeight}">

//监听高度，让card自适应
    handleHeight(){
      this.boxHeight = (window.innerHeight || document.documentElement.clientHeight) - 20 + 'px';
},

8.echarts饼状图在图表内部和外部都显示数据

用两条一样的数据

10.Thousand

const thousand = function(number) {
  const arr = (number + '').split('.')
  const int = arr[0] + ''
  const fraction = arr[1] || ''
  const f = int.length % 3
  let r = int.substring(0, f)

  for (let i = 0; i < Math.floor(int.length / 3); i++) {
    r += ',' + int.substring(f + i * 3, f + (i + 1) * 3)
  }
  if (f === 0) {
    r = r.substring(1)
  }
  return r + (!fraction ? ' ' + fraction : '')
}
export default thousand

11.控制浏览器返回方法

mounted() {
    if (window.history && window.history.pushState) {
      // 往历史记录里面添加一条新的当前页面的url
      history.pushState(null, null, document.URL)
      // 给 popstate 绑定一个方法 监听页面刷新
      window.addEventListener('popstate', this.backChange, false) //false阻止默认事件
    }
  },
  destroyed() {
    window.removeEventListener('popstate', this.backChange, false) //false阻止默认事件
  },
  methods: {
    backChange() {
      // this.$router.push({
      //   path: '/',
      // })
      history.pushState(null, null, document.URL)
    },
  },

13.安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install

14、直接跳转第三方页面

给页面一个方法，将方法在created里面调用，点击页面则直接跳转到第三方页面
window.location.href = ‘URL’

15、npm,cnpm穿插使用报错

1.清除缓存：npm cache clean --force
2.安装依赖(我使用淘宝镜像安装依赖)： cnpm install

17、判断数组、对象

console.log(Object.prototype.toString.call(arr));  //[object Array]

console.log(Object.prototype.toString.call(obj)); //[object Object]

*用apply也可以*

18、基本类型、引用类型

一、 基本类型： string,number,boolean,null,undefined,（symbol）

二、 引用类型： Function,Array,Object

19、反转字符串（str.reverse()）

const str = 'hello world !'
function reverseStr(param) {
  // split() 的作用是将字符串转换成数组
  // 如果不带任何的参数，那么就是将整个字符串一起转换成数组
  // 如第二个栗子所示！ 带参数就是用指定的参数来
  // 将字符串中的每个元素用指定参数进行包裹然后成为
  // 新数组中的每个元素
  // 如第一个打印的!
  console.log(param.split("").reverse().join(""));
}
console.log(str.split(""));
// ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", " ", "!"]
console.log(str.split());
// ['hello world !']
reverseStr(str);
// ! dlrow olleh

21、图片懒加载

相关API

1、document.documentElement.clientHeight //获取屏幕可视区域的高度
2、element.offsetTop //获取元素相对于文档顶部的高度（元素相对于其父元素容器顶部的距离）
3、document.documentElement.scrollTop //获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
如果：offsetTop-scroolTop<clientHeight，则图片进入了可视区内，则被请求。

总结：懒加载其实就两个重点，一个是元素到各个边距的距离，二个就是判断元素是否在可视区域内。

22、vue中有关.env;.env.development,.env.production

1，关于文件名：必须以如下方式命名，不要乱起名，也无需专门手动控制加载哪个文件
　　.env 全局默认配置文件，不论什么环境都会加载合并
　　.env.development 开发环境下的配置文件
　　.env.production 生产环境下的配置文件
2，关于内容
　　注意：属性名必须以VUE_APP_开头，比如VUE_APP_XXX

3，关于文件的加载：
　　根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载的，所以上面说“不要乱起名，也无需专门控制加载哪个文件”比如执行npm run serve命令，会自动加载.env.development文件
　　
process.env属性（全局属性，任何地方均可使用）
注意：.env文件无论是开发还是生成都会加载的公用文件

23、WebStorage提供了一些方法

1、setItem (key, value) —— 保存数据，以键值对的方式储存信息。
2、getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
3、removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
4、clear () —— 删除所有的数据
5、key (index) —— 获取某个索引的key

24、将方法挂载到window上，让客户端（ios，android）调用

  created() {
    window['endyy'] = code => {
      this.endyy(code)
    }
  },

25、JSON.parse()，JSON.stringify()

1、JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。
2、JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。

26、npm版本为7以上，install报错

7以上版本比6更严格，解决办法（亲测2好用）：

1、降级到npm6.x
2、npm i --legacy-peer-deps

28、去掉type=number输入框的上下图标

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

31、前端利用redis自启服务

1、将后端服务打包成jar
2、电脑上下载redis

redis-server
java -jar xxxxxx.jar

32、echarts柱状图设置不同颜色

itemStyle:{
	color:function(params){
		 var colorlist = ['#DA251D','#E67716','#FBC300','#11440f','#32585a','#00ff77'];
                return colorlist[params.dataIndex];
	}
}

33、千分位过滤器

在main.js中

//过滤器 千分位
Vue.filter('formatNumber', function(value = '--', currencyType = '') {
  let res
  if (value.toString().indexOf('.') === -1) {
    res = (value || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
    if (value == '') {
      res = '--'
    }
  } else {
    const prev = value.toString().split('.')[0]
    const next =
      value.toString().split('.').length == 1
        ? value.toString().split('.')[1]
        : value.toString().split('.')[1]
    res =
      (prev || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + '.' + next
  }
  return currencyType + res
})

34、数据为空过滤器

//过滤器 数据空返回 --
Vue.filter('filterData', function(value) {
  if (value == ' ' || value == '' || value == undefined || value == null) {
    return '--'
  } else {
    return value
  }
})

35、防止多次点击

//防止多次点击
Vue.directive('preventReClick', {
  inserted: function(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 2000)
      }
    })
  },
})

====== directive.js文件中 ====
import Vue from 'vue'
const preventReClick = Vue.directive('preventReClick',{
    inserted: function(el, binding, vNode, oldVnode){
        el.addEventListener('click', () => {
            if(!el.disabled){
                el.disabled = true
                setTimeout(() => {
                    el.disabled = false
                }, 2000)
            }
        })
    }
})
 
export default {
    preventReClick 
}
 
====== 在main.js文件中引入指令 =====
import { preventReClick } from './directive/directive.js'
Vue.use( preventReClick )

// 添加新属性
<el-button type="primary" @click="handleSave" v-preventReClick>保存</el-button>

36、图片转base64

// 图片转base64格式 挂载在全局
Vue.prototype.$base64Img = e => {
  return new Promise(function(resolve, reject) {
    // 使用Promise进行异步处理
    let fileSize = 0
    const fileMaxSize = 4096 // 设置图片最大为 1M
    fileSize = e.target.files[0].size // 获取图片大小
    const size = fileSize / 1024
    const file = e.target.files[0] // 获取图片文件对象
    const reader = new FileReader() // 实例化一个对象
    if (size > fileMaxSize) {
      e.target.value = '' // 内容清空
      resolve({ err: '图片大小必须小于1M' })
    } else if (size <= 0) {
      e.target.value = '' // 内容清空
      resolve({ err: '图片大小大小不能为0M' })
    } else {
      reader.readAsDataURL(file) // 把图片文件对象转换base64
      reader.onload = function(e) {
        resolve(e.target.result) // 回到函数返回base64值
      }
    }
  })
}

37、获取节点宽高

offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）

offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）

clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）

clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）

style.width //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）

style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）

scrollWidth //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同

scrollHeigh //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同

38、清除浮动（万能方法）

.father: after{
  content: '',
  clear: both,
  display: block,
  height: 0,
  overflow: hidden,
  visibility: hidden
}

39、滑动页面，使输入框失去焦点

created(){
  this.touchMove()
},
methods:{
  touchMove() {
      document.body.addEventListener(
        'touchmove',
        function (e) {
          if (document.activeElement) {
            document.activeElement.blur()
          }
        },
        { passive: false },
      )
    },
}

40、一些vsCode必备插件

41、输入框搜索快速变化请求接口，导致数据出现问题

参考链接
1、https://blog.csdn.net/leilei__66/article/details/122238328
2、https://blog.csdn.net/leilei__66/article/details/122238328

data(){
	return{
		lastTime:0,
	}
}
watch:{
	keyword(newVal){
	   if(this.lastTime == 0){ 
	     this.lastTime = setTimeout(()=>{
	       // AJAX(newVal)
	     },2000)
	   }else{
	     clearTimeout(this.lastTime)
	     this.lastTime = setTimeout(()=>{
	       // AJAX(newVal)
	     },2000)
	   }
	}
}

43、在vue项目中展示外部链接页面（iframe）

<div style="width: 100%;height: 100px;background-color: #00d1b2"></div>
 <div style="width: 100%;height: 500px;">
     <iframe style="width: 100%; height: 800px;" src="https://vue-js.com/learn-vue/lifecycle/initEvents.html#_2-%E8%A7%A3%E6%9E%90%E4%BA%8B%E4%BB%B6" allowfullscreen="allowfullscreen" frameborder="0" data-id="1"></iframe>
 </div>

44、判断是空对象

方法一：将对象转换成字符串，再判断是否等于“{}”

let obj={};
console.log(JSON.stringify(obj)==="{}");
//返回true

45、el-image 大图预览（上一张下一张）

// 大图预览，实现点击当前图片显示当前图片大图，可以随机切换到其他图片进行展示
 getPreviewImgList(index, list) {
   let arr = [];
   let i = 0;
   for (i; i < this[list].length; i++) {
     arr.push(this[list][i + index]);
     if (i + index >= this[list].length - 1) {
       index = 0 - (i + 1);
     }
   }
   return arr;
 },

类数组

js中有一类数据，虽然可以通过索引取值，有length属性，且是大于等于0的整数值。看起来和数组一样，但其实它不是真正的数组，不能使用数组的方法，Array.isArray()判断返回值一定是false，这就是类数组

例如：

• dom操作比如querySelectorAll返回的dom元素列表；
• 函数的arguments对象；
• 给任意一个普通对象增加一个length属性

类数组转数组：

• Array.from
• Array.prototype.slice.call
• 扩展运算符…