0313-0315的笔记

回到顶部

window.scrollTo(0,0) 一次性的过程,就是滚动到起始位置，就是x=0，y=0的地方。
是绝对滚动，相对屏幕来说。和window.scroll(0,0)一样的道理

window.scrollTo(x,y)
参数解释：
    x:要在窗口文档显示区左上角显示的文档的 x 坐标。
    y:要在窗口文档显示区左上角显示的文档的 y 坐标。

也有以对象形式的传参数。
window.scrollTo(options)
参数解释：
    options有三个属性：

• left: num,此属性与x-coord参数对应，属性值是一个数字，默认单位是像素。
• top: num,此属性与y-coord参数对应，属性值是一个数字，默认单位是像素。
• behavior:behavior。属性规定调整是以动画方式完成，还是瞬间完成，具有两个属性值，"auto"与"smooth"

既然是调整滚动条的位置，那必须在一个坐标系中，否则你无法定位。
兼容性：xy形式的传参，任何浏览器都兼容，但opitons形式的传参，只有谷歌，火狐，opera兼容，其他不兼容。

拓展：
window.scrollBy(x-coord, y-coord) 代表的是在窗口中按指定的偏移量滚动文档。
scrollBy方法可以将文档位置移动指定尺寸，单位是像素（px）
scrollBy设置的尺寸不是一个绝对值，而是基于上一次值的一个增量。就是每次点击就是累加的过程。
该前提是有滚动条的情况才能生效，兼容性都适用于各个浏览器

正则，获取dom元素的某个值

获取a的x值。
let a = translate3d(-288.88px, 0px, 0px)
let b = a.match(/translate3d((-?\d+(.\d+)?)px,\s(\d+)px,\s(\d+)px)/i)[1]

• 1 负号，点.要转义，加\
• 2 ？代表前面的字符只能出现0次或1次
• 3 （）有两种含义，一个是优先级，一个是匹配里面的字符并获取这一匹配，就是数组里的值就和（）有关
• 4 * 代表可以不出现，也可以出现1次或多次
• 5 match返回的是一个数组,第一个是全部的数据（translate3d(-288.88px, 0px, 0px) ）

后台返回图片数据时是一个很长乱码的base64

后台返回图片是一个图片流，就是前端收到的是一个乱码的值。
解决办法：前端就直接把该地址赋值给img的src即可，无需发起一个请求
img.src = http://10.200.7.17:1220/captchaImage?type=char&s=${Math.random()} (？后面是后台要求的参数)

forEach 无法跳出循环

js的forEach循环
用break直接报错 'Illegal break statement'
用continue报 Illegal continue statement: no surrounding iteration statement
return是可以跳出满足条件的循环，而不是终止循环，return false也是如此

var arr = [1,2,3,4,5,6]
arr.forEach(val=>{
  if(val == 3){
    val = 33
    return
  }
  console.log(val) // 1 2 4 5 6
})

解决办法

• 用普通的for循环，可以使用break，return跳出
• 网上说的，用抛出异常的方式跳出循环。

  try {
    var array = [1,2,3,4,5,6];
    // 执行到第3次，结束循环
    array.forEach(function(item,index){
        if (item == 3) {
            throw new Error("EndIterative");
        }
        console.log(item);// first,sencond
    });
  } catch(e) {
    if(e.message!="EndIterative") throw e;
  };
  

elementui 的table更改头部样式，换行之类的

<el-table-column :render-header="renderHeader"></el-table-column>
methods中添加（{}代表要填的样式，类名之类的）其结果可以通过控制器查看到

  renderHeader (h,{column,$index}) {
    return [h('p', {style:{color:’red’},class:’helloe'}, ['标题']),h('p', {}, ['单位'])]
  }

elementui的el-pagination抽成组件复用

<div class="pagination">
  <el-pagination
    @size-change="pagination.handleSizeChange"
    @current-change="pagination.handleCurrentChange"
    :current-page="pagination.currentPage"
    :page-sizes="pagination.pageSizes"
    :page-size="pagination.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pagination.total">
  </el-pagination>
</div>

<script>
paginationData:{
  total: 30,
  pageSizes: [10,20,30],
  pageSize: 10,
  currentPage: 1,
  handleSizeChange: val=>{ //pageSize改变时
    console.log(val)
  },
  handleCurrentChange: val=>{//currentPage改变时
    console.log(val)
  },
}
props:['pagination']
</script>