杂记篇

1.将数据存在缓存里：

sessionStorage.setItem('名字', JSON.stringify(数据));   

 

2.从缓存里拿数据：

JSON.parse(sessionStorage.getItem('名字'))；

sessionStorage.removeItem('名字');

this.$router.replace({ query });

 

3.动态名class名

:class="['right-icon',(topMsg.warnType==='2' || topMsg.topMsg==='3')?'warn':'remind']"

:class="['默认名', {{'border':isShowMore}}]"

 

4.将数组对象更换某个key名：

JSON.parse(JSON.stringify(item).replace(/"roleList（需要更换key）":/g, '"tagList（需要key）":'));

 

5.将滚动置顶

this.$refs.list.$el.scrollIntoView();

this.$refs.list(滚动的元素).scrollTop = 0;

 

6.锚点（移动到某个字母）进行滚动列表

document.querySelectorAll('.sc-scroller-module')[i].scrollIntoView();

 

7.js改变css

元素.style.top = `${top + height / 2 - iconHeight / 2}px`

 

8.判断是ios还是安卓机型

/android/gi.test(navigator.userAgent)

 

9.html 返回上一页

$router.back()

 

10.搜索框，如果点击软键盘的搜索不要调用接口时候

<form action="javascript:void(0);"><input @keyup.13="方法名"></input></form>

@keyup.13或者@keypress.enter===点击软键盘的搜索键触发事件

 

11./** 列表滚动

　　i：下标

 */

      scroll(i) {

        const elIcon = document.querySelector('.sc-index-bar-toast');

//获取元素的高和top值，

        const { height, top } = document.querySelectorAll('.sc-index-bar-button')[i].getBoundingClientRect();

        const { height: iconHeight } = elIcon.getBoundingClientRect();

        elIcon.style.top = `${top + height / 2 - iconHeight / 2}px`;

//置顶

        document.querySelectorAll('.sc-scroller-module')[i].scrollIntoView();

      },

 

 

12.返回历史的第二页

this.$router.history.go(-2);

 

13.git 创建分支

git branch -d 分支名： 删除分支

git checkout -b 分支名 ：创建分支并切换分支

git brach :查看所有分支

 

14.png，jpg，gif图片区别

1. png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。

2. jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。

3. gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.

15.盒子模型

1.标准盒模型：content不包括padding ，border      content+padding+border+margin = width

2.怪异盒模型：content包括padding，border          content+margin = width

 

16.box-sizing的属性

border-box：width = content

content-box：width = content+border+padding

 

17.适配7p手机的滚动

　　

-webkit-overflow-scrolling: touch;在滚动的元素上加，解决7p手机滚动卡顿现象

 

18.兼容

    在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

 

19.   ::bedore和::after     就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

 

20. input中的样式调整

/*去掉默认的搜索小图标*/

  input[type='search']::-webkit-search-decoration {

    display: none;

  }

  /*去掉默认的x*/

  input[type='search']::-webkit-search-cancel-button {

    display: none;

  }

  /*去掉ios下的圆角*/

  input[type='search'] {

    -webkit-appearance: none;

  }

input::-webkit-input-placeholder {
 9         /* placeholder颜色  */
10         color: #aab2bd;
11         /* placeholder字体大小  */
12         font-size: 12px;
13         /* placeholder位置  */
14         text-align: right;
15     }

caret-color: #ff8727--修改光标颜色

21.替代if语句

　　三元运算符，使用es6箭头函数，fun（(b)=>a===1?3:0）

 

22.人家说是，装逼写法

switch(breed){

case 'border':

   return 'Border Collies are good boys and girls.';

   break;

case 'pitbull':

   return 'Pit Bulls are good boys and girls.';

   break;

case 'german':

   return 'German Shepherds are good boys and girls.';

   break;

default:

  return 'Im default'

}

 

可这样表达：

const dogSwitch = (breed) =>({

    "border": "Border Collies are good boys and girls.",

    "pitbull": "Pit Bulls are good boys and girls.",

    "german": "German Shepherds are good boys and girls.",

})[breed] || 'Im the default';

dogSwitch("border xxx")

 

如果获取的是组件的，必须加$el才能拿到，getBoundingClientRect：拿到该元素的宽高，top以及底部

this.$refs.list.$el.getBoundingClientRect().top;

 

 

document.body.scrollIntoView：表示页面主体置顶

 

如果不是某个组件的滚动的话，那就是整个页面滚动：

document.documentElement.scrollTop

 

引入特殊字体---在style里面引入

 

@font-face {

  font-family: 'DIN';

  src: url('../../../assets/font/DIN.ttf') format('truetype');

}

 

兼容不同手机头部的padding

padding-top: 44px;

  padding-top: calc(44px + constant(safe-area-inset-top)); /* 兼容 iOS < 11.2 */

  padding-top: calc(44px + env(safe-area-inset-top)); /* 兼容 iOS >= 11.2 */

 

组件缓存keep-alive起来时候，8个生命周期不会执行，只有activated 和deactivated 才会对应执行的。在组件离开时，执行deactivated ，再次回到该组件时，activated 

 

 

如何上传图片

　　1.在封装的axios里加headers

　　　　headers: {

　　　　　　'content-Type': 'multipart/form-data'

　　　　}

2.将入参转为formData格式　

　　file就是文件里面的内容

　　const params = new FormData()

　　params.append('file', file)

 

/**

* base64 转 file

* @param base64 base64

* @param type 文件类型

* @param name 文件名

* @returns {File}

*/

base642File(base64, type, name) {

let binary = window.atob(base64.split(',')[1])

let array = []

for (let i = 0; i < binary.length; i++) {

array.push(binary.charCodeAt(i))

}

return new File(

[new Uint8Array(array)],

name || `${new Date().getTime()}.${type.split('/')[1] || 'png'}`,

{ type }

)

},