项目中碰见的想记录一下

定时器（倒计时）

请求中触发的倒计时

// data 中的 time=60
let that=this
let time = setInterval(() => {
        that.time--
        that.getcodetest = parseInt(that.time) + ' s'
        // 根据时间 状态判断
        that.time > 0 ? (that.isgetcode = false) : (that.isgetcode = true)
        if (that.time == 0) {
          clearInterval(time)
          that.time = 4
          that.getcodetest = '获取验证码'
          let getcode = document.querySelector('.getcode')
          getcode.style.setProperty('background', '#009e96')
        }
      }, 1000)

原生dom

let getcode = document.querySelector(".getcode");
getcode.style.setProperty("background", "#009e96");

js改变css样式的方法：
1、使用cssText方法；
2、使用【setProperty()】方法；
3、使用css属性对应的style属性。

第一种：用cssText

div.style.cssText='width:600px;height:250px;border:1px red solid;text-align: center;line-height: 250px;';

第二种：用setProperty()

div.style.setProperty('width','500px');
 div.style.setProperty('height','500px');
 div.style.setProperty('background','pink');
 div.style.setProperty('color','#fff');
 div.style.setProperty('border','1px solid blue');

第三种：使用css属性对应的style属性

 div.style.width = "200px";
 div.style.height = "220px"; 
 div.style.background = "#FFFFFF";

手机号码验证

1. 最简单的

if (!/^1[3456789]\d{9}$/.test(that.phone)) {
        this.$toast("手机号码有误，请重填");
        return;
    }

2. 正常的

const mobile=/^(((13[0-9])|(14[5-7])|(15[0-9])|(17[0-9])|(18[0-9]))+\d{8})$/
if(!mobile.test(this.phone)){
	this.$toast("手机号码有误，请重填");
    return;
    }

axios 实例化

以前没这么细致过，只配过基础路径、过期时间

const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: "http://api.7192.com/",  // 这里以这个地址为例，建议写到.env中
    timeout: 30000,//请求超时时间
    headers: {
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8", //表单数据类型
        // "Content-Type":"application/x-www-form-urlencoded", //表单数据类型
    },
    // withCredentials: true   // 设置这个参数，让跨域请求携带cookie，因为cookie中包含了登录的信息
})

vant 上传

<van-uploader class="img" v-model="fileList" :after-read="afterRead" :deletable="deletable" :preview-full-image='previewShow'>
        <van-button class="up" icon="plus" color="#009E96" plain></van-button>
</van-uploader>

:after-read=“afterRead” 绑定的事件

  afterRead(file) {
      // 文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象 此时可以自行将文件上传至服务器
      console.log(file, '上传的照片')
      // this.fileList.push({ url: file.content, id: 100 })
      // console.log(this.fileList)
      this.getWorks()
    },

当前界面body背景色

在创建之前先添加背景色

 beforeCreate() {
    this.$nextTick(() => {
      document.body.setAttribute('style', 'background:#F9F9F9')
    })
  },

实例销毁–移除当前路由body 标签的属性style

// 实例销毁之前钩子--移除当前路由body 标签的属性style，避免与其他路由界面背景色冲突
  beforeDestroy() {
    document.body.removeAttribute('style')
  },

监听 scroll 事件

这里是引用

mounted() {
  // 监听 scroll 事件，绑定回调函数
  window.addEventListener("scroll", this.scrollEvent);
 },

event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

event.pageX、event.pageY

类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

event.offsetX、event.offsetY

鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

手机端坐标

1.系统提供了getLocationOnScreen(intlocation[])获取Android坐标系中点的位置，即该View左上角在Android坐标系的坐标。另外，在触控事件中使用`getRawX() getRawY()方法所获得的坐标同样是Android坐标系的坐标。

系统提供了getLocationOnScreen(intlocation[])获取Android坐标系中点的位置，即该View左上角在Android坐标系的坐标。另外，在触控事件中使用`getRawX() getRawY()方法所获得的坐标同样是Android坐标系的坐标。

2.视图坐标系

它描述的是子视图在父视图中的位置关系。

视图坐标系是以父视图的左上角为坐标原点的。相应的原点向右为x轴正方向，原点向下为y轴正方向。在触控中，通过getX()和getY()来获取的坐标值就是视图坐标系中的坐标值。

3.获取坐标的方法 在android中，提供了非常丰富的方法来获得坐标值和相对距离。但是在使用这些方法的时候，一定要清楚是以哪个坐标系为标准来获取的。

View提供的获取的坐标以及距离的方法：

getTop() 获取到的是view自身的顶边到其父布局顶边的距离
getLeft() 获取到的是view自身的左边到其父布局左边的距离
getRight() 获取到的是view自身的右边到其父布局左边的距离
getBottom() 获取到的是view自身底边到其父布局顶边的距离


MotionEvent提供的方法：

getX() 获取点击事件距离控件左边的距离，即视图坐标
getY() 获取点击事件距离控件顶边的距离，即视图坐标
getRawX() 获取到的是点击事件距离整个屏幕左边的距离，即绝对坐标
getRawY() 获取到的是点击事件距离整个屏幕顶边的距离，即绝对坐标