Vue3 elementPlus 修改el-drawer 封装buttomSelector

Vue3 elementPlus 修改el-drawer css

elementPlus的抽屉组件，对于移动端的样式很多的功能不太满足。所以我封装了一个底部选择的组件，用于移动端的一些信息修改或者选择。

这边对与样式的修改主要是有个遇到的问题顺便这边讲一下。

一般修改样式我们都会给每个页面的css加上scoped。但是这样有时候修改elementPlus的样式的时候会不生效。（有时候生效的，比如elementPlus 的输入框的 .el-textarea__inner ）

解决方法：给对应的elementPlus组件加上一个custom-class 然后样式修改以这个为父组件进行修改即可.一般命名可以有规则的复杂一点，这样避免重复和污染其他组件

​
<el-drawer custom-class="selectorComponentContainer" v-model="showDrawer"  :direction="'btt'">
    <template #default>
      <div class="itemContainer">
        <div v-for="(item,index) in selectList" class="item" @click="changeSelect(index)">
          {{item}}
        </div>
        <div class="divider"/>
        <div class="item" @click="closeView">
          取消
        </div>
      </div>
    </template>
  </el-drawer>
<style >
.selectorComponentContainer{
  width: 100%;
  max-height: 50%;
  height: v-bind(drawerHeight) !important;
}
.selectorComponentContainer .el-drawer__header {
  display: none;
}
.selectorComponentContainer .el-drawer__body {
  background-color: #252525;
  padding: 0;
}
.selectorComponentContainer .el-drawer__body::-webkit-scrollbar {
  width: 0 !important;
  height: 0px !important;
}
</style>

​

然后讲一下这个组件的封装过程。（后面贴上组件代码和使用代码）

1. 首先查看el-drawer的组成部分。整体由一个el-overlay包裹在最外层

2. 然后里面有header,body,footer三部分组成

3. 这边不需要footer和header,我们自己封装一个列表即可

4. 所以利用css 将header不显示。footer没有传参数默认不显示，我们就不用处理

5. 我们封装自己的列表一个是外面传进来的数组，一个是取消按钮。即可

6. 为了界面美观我设定了最大高度50%，然后组件的高度由里面的数组的数量控制。

7. 然后响应界面显示，监听了抽屉组件的显示变量。响应给外面的调用。

8. 最后就是选择，然后响应给外面的调用。（传出选中的index就好了）

   <template>
     <el-drawer custom-class="selectorComponentContainer" v-model="showDrawer"  :direction="'btt'">
       <template #default>
         <div class="itemContainer">
           <div v-for="(item,index) in selectList" class="item" @click="changeSelect(index)">
             {{item}}
           </div>
           <div class="divider"/>
           <div class="item" @click="closeView">
             取消
           </div>
         </div>
       </template>
     </el-drawer>
   
   </template>
   
   <script setup>
   import {ref, toRefs, watch} from "vue";
   
   const emit = defineEmits(['changeSelect',"closeSelector"])
   const props = defineProps(["selectList","selectIndex","title"])
   const {selectIndex,selectList,title} = toRefs(props)
   
   const drawerHeight =  (selectList.value.length+1)*50+10+"px";
   console.log(drawerHeight)
   
   const showDrawer = ref(true)
   watch(showDrawer,()=>{
     closeView()
   })
   const closeView = () => {
     emit('closeSelector')
   }
   const changeSelect = (index) => {
     emit('changeSelect',index)
     closeView()
   }
   </script>
   
   <style >
   .selectorComponentContainer{
     width: 100%;
     max-height: 50%;
     height: v-bind(drawerHeight) !important;
   }
   .selectorComponentContainer .el-drawer__header {
     display: none;
   }
   .selectorComponentContainer .el-drawer__body {
     background-color: #252525;
     padding: 0;
   }
   .selectorComponentContainer .el-drawer__body::-webkit-scrollbar {
     width: 0 !important;
     height: 0px !important;
   }
   </style>
   <style scoped>
   .itemContainer{
     width: 100%;
   }
   .item{
     color: white;
     text-align: center;
     line-height: 50px;
     height: 50px;
     background-color: #2d2e30;
     border-top: #252525 2px solid;
   }
   .divider{
     width: 100%;
     height: 10px;
   }
   </style>
   
   
   //----------外面组件的调用-------//
   <buttom-selector
           v-if="showSelector"                        //控制控件显示变量
           @closeSelector="changeShowSelector"        //关闭控件的函数
           @changeSelect="changeSelect"               //选中返回的函数
           :selectList="['女','男']"                  //传进去显示的列表
       />
   

   好的。谢谢关注