前端知识的笔记和总结

开发过程中，都会遇到很多难点和坑，针对这些，这次我做了一些总结，希望能对看到的网友有一点帮助，写的不对的也希望网友在下方评论。

css方面：

修改svg格式图片的颜色，在path后面增加fill=‘颜色名’，支持RGB格式，不支持十六进制代码
background-image:url(“data:image/svg+xml;charset=utf8,%3Csvg xmlns=‘http://www.w3.org/2000/svg’ width=‘12’ height=‘24’ viewBox=‘0 0 12 24’%3E %3Cpath fill-opacity=’.9’ fill-rule=‘evenodd’ fill=‘white’ d=‘M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z’/%3E%3C/svg%3E”)

背景渐变
background: linear-gradient(#f05568, #d75f80);//垂直渐变色
background: linear-gradient(to right,#6FD2F2, #3CA6E1); //横向渐变

css实现自定义虚线边框
border: 1px dashed transparent;
background: linear-gradient(white,white) padding-box,
repeating-linear-gradient(-45deg,#ccc 0, #ccc 0.25em（虚线格子的长度）,white 0,white 0.6em（虚线间隔的宽度，越小越密集）);

文字渐变
span {
background: linear-gradient(to right, #d2b88f, #faf0e3);
-webkit-background-clip: text;
color: transparent;
}

js方面

切换路由前会触发的回调函数,解决切换页面后滚动条不置顶的问题
router.beforeEach((to,from,next)=>{
 document.querySelector("html").scrollTop=0;
 next()
})

elementUi列表中checkBox无法勾选的情况
用vue.$set方法，强制vue监听checked属性
arr.forEach(item=>{
this.$set(item, 'tableChecked', false)
})

vue只能监听数组的push，pop,shift,unshift等方法，使用watch监听数组的话，可以设置一个计算属性，使用watch去监听该计算属性
    computed: {
        arrString() {
           return JSON.stringify(this.arr)
        }
    },
    watch: {
        arrString(newValue) {
            // 这里添加你想进行的操作
        }
    }

 有时候会碰到要批量修改对象的key的情况，可以参考下面的函数。
 //obj是要修改的对象，oldKey是原来的key,changeKey是要修改的key
  alterKey(obj,oldKey,changeKey) {
      var newObj = Object.keys(obj).reduce((newData, key) => {
        if (key.indexOf(oldKey) != -1) {
          var reg = new RegExp(oldKey);
          var newKey = key.replace(reg, "");
          newKey = changeKey + newKey;
          newData[newKey] = obj[key];
        } else {
          newData[key] = obj[key];
        }
        return newData
      }, {})
      return newObj
  }

h5页面输入框输入完以后有时候会把页面往上顶，可以在mounted里加下面的方法，在输入完之后页面回滚到初始位置
    document.body.addEventListener(
      "blur",
      function() {
        window.scrollTo(0, 0);
      },
      true
    );

小程序方面

小程序引入组件
1 打开小程序目录,打开git输入 npm init 后出现一些要确认的东西，回车或y健确定，直至完成
2 输入npm install 
3 输入要引入的组件 例如： npm i weui-miniprogram（小程序自己的扩展组件） npm i vant-weapp -S --production（vant组件）
4 在微信开发者工具中勾选使用npm模块
5 构建npm，在微信开发者工具中工具选项中点击构建npm
6 显示构建完成后在小程序的app.wxss 中引入@import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
7 在使用组件的页面的json文件中引入
  "usingComponents": {
    "mp-cells": "../miniprogram_npm/weui-miniprogram/cells/cells",
    "mp-cell": "../miniprogram_npm/weui-miniprogram/cell/cell",
    "mp-slideview": "../miniprogram_npm/weui-miniprogram/slideview/slideview"
  }
8 再把组件对应的wxml代码拷贝过来就可以使用了

弹出框时禁止弹框下的内容滚动
原生小程序在遮罩层上加catchtouchmove="return"
mpvue小程序里@touchmove.stop="stopEvent($event)"
function stopEvent(e) {
      e.preventDefault();
}

 mpvue小程序页面切换不会重置data里的数据，可以在 
 onUnload() {
 this.resetData();
  } 
  resetData() {
      Object.assign(this.$data, this.$options.data());
 }
要注意的是如果要重置组件里的数据，要给组件加个if判断，默认为false,mounted里设置为true,不然无法重置

小程序里弹出键盘遮挡住输入框
给input设置cursor-spacing：指定光标与键盘的距离，单位px或rpx，默认为px。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
ps:详细可查看此作者文章