【前端开发一些方法总结】（均是结合日常总结及其他文章参考）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

一、样式

二、vue

1、在vue中如何结合ref和原生dom操作获取dom元素（比如在element-ui中无法直接给内置元素添加ref，此时又必须对其操作）

三、element-ui

1、el-select

        select的弹出框跟select不在一块，导致如果需要给弹出框添加类名时会比较麻烦，但是element-ui已经封装好了。

（ps:这只是个小问题，但是充分说明百度解决不了的问题，不一定无解，还是要仔细阅读官方文档）

 <el-select v-model="value" placeholder="请选择" popper-class="设置下拉框的类名">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

四、常见方法

1、点击按钮(或者某个元素)，某个区域块内的滚动条出现后，会自动到达最底部，相当于自动跳到最新添加的数据位置

前言

对日常开发中经常遇到的一些方法的总结，大部分参考了其他优秀程序员的文章，只是将其总结为自己的笔记（智慧囊）

一、样式

1、关于设置盒子垂直居中的问题(父盒子及子盒子不限制高度)

常见方法不再列数，但是有时候在修改element-ui的样式过程中，由于固定样式较杂，往往导致flex会失效，可以采用以下方法：

        .parent {
            position: relative;
            width: 500px;
        }
        .child {
            position: absolute;
            top: 50%;
            transform:translateY(-50%)
            width: 100px;
        }

二、vue

1、在vue中如何结合ref和原生dom操作获取dom元素（比如在element-ui中无法直接给内置元素添加ref，此时又必须对其操作）

box = this.$refs['refName'].$el.getElementsByClassName('类名')[0]

三、常见方法

1、点击按钮(或者某个元素)，某个区域块内的滚动条出现后，会自动到达最底部，相当于自动跳到最新添加的数据位置

 const box = this.$refs[ref].$el.getElementsByClassName('')[0]
      const timer = setTimeout(function() {
        box.scrollTop = box.scrollHeight
        clearTimeout(timer)
      }, 300)
//此处添加定时器是为了能够使得滚动条每次滚动到最底部的动作较为明显，增加体验感

---