Element-UI滚动条组件封装

当内容超出固定区域后，会出现滚动条，浏览器自带的滚动条样式比较丑，所以可以使用el-scrollbar的组件进行优化封装

1、组件封装

<template>
  <!-- 滚动条组件 -->
  <div class="AutoScrollbar" :style="{ height: height }">
    <el-scrollbar class="page-component__scroll">
      <!--使用插槽-->
      <slot></slot>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "AutoScrollbar",
  props: {
    height: String
  },
};
</script>
<style>
.page-component__scroll {
  height: 100%;
}
.page-component__scroll .el-scrollbar__wrap {
  overflow-x: auto;
}
</style>

2、组件的使用

<template>
  <AutoScrollbar height="180px" v-if="recordlist.length > 1">
    <div class="item" v-for="item in recordlist" :key="item.id">
         <p>{{item.name}}</p>
     </div>
   </AutoScrollbar>
</template>

<script>
import AutoScrollbar from "@/components/common/AutoScrollbar"
export default {
  name: "AutoScrollbar",
   data() {
    return {
      recordlist:[]
    }
  },
  components: {
    AutoScrollbar
  },
};
</script>