前端笔记

经验
/
笔记

前端笔记

# 1. 正则将 20190102 这类日期转成 2019-01-02

fMonth.replace(/^(\d{4})(\d{2})$/, '$1-$2')

# 2. CSS 文字自动换行

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

# 3. pdf 相关

pdf 适配的单位是 pt，在正常屏幕下 1pt=1px*0.75

// a4纸尺寸
$ppt - width: 595.28 pt;
$ppt - height: 841.38 pt;

# 4. vue 将 data 数据恢复到初始状态

Object.assign(this.$data, this.$options.data()) // 初始化data
这里的 this.$options.data() 作为源对象， this.$data 作为目标对象。 源对象覆盖并合并目标对象中的内容， 即有则覆盖， 无则添加。

# 4. 时区转换

let moment = require('moment-timezone')

let time = '2019-01-30 11:00'
console.log(moment.tz(time, 'America/Los_Angeles').format()) //给已知时间加上时区
console.log(
    moment(time)
    .tz('America/Los_Angeles')
    .format()
) //将已知之间转换到指定时区的时间
console.log(
    moment()
    .tz('America/Los_Angeles')
    .format()
) //获取指定时区的当前时间

# 5.element 表格，在分页的时候实现多选

https://blog.csdn.net/weixin_43828444/article/details/98873426

  • 在 el-table 中添加:row-key="getRowKeys"
  • 然后第一列，即有多选框的一列，添加:reserve-selection="true"

<el-table-column type="selection" :reserve-selection="true"></el-table-column>

  • 然后在 methods 中添加函数：
  getRowKeys(row) {
      return row.id
  },

# 6. 数组对象去重

  unique(arr) {
      const res = new Map();
      //新建一个map，然后开始筛选，判断res里有没有当前item的id，如果有，就返回且把ID放进map，如果没有就过
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
  }

# 7. 在 v-for 里的元素加上 ref='abc'

在 this.$refs 里是 abc:[vue, vue]数组的形式，直接按 index 取就可以了

# provide/inject 传值时，如果在祖先里值变化，后代组件获取不到变化后的值

https://blog.csdn.net/qq_22078107/article/details/104672810

# 9. 滚动轴修改

<div class="test test-5">
    <div class="scrollbar"></div>
</div>

.test-5::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.test-5::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent);
}

# 10. 一行中设置两个inline-block错位问题

一行中两个inline-block的话，第二个盒子会往下掉，错位。 这是元素的极限问题。设置vertical-align：middle就可以了

# 11. 前面补零，比如日期

'1'.toString().padStart(2, 0) => '01' //补成2位，用0

ios适配

ios适配