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>
然后讲一下这个组件的封装过程。(后面贴上组件代码和使用代码)
-
首先查看el-drawer的组成部分。整体由一个el-overlay包裹在最外层
-
然后里面有header,body,footer三部分组成
-
这边不需要footer和header,我们自己封装一个列表即可
-
所以利用css 将header不显示。footer没有传参数默认不显示,我们就不用处理
-
我们封装自己的列表一个是外面传进来的数组,一个是取消按钮。即可
-
为了界面美观我设定了最大高度50%,然后组件的高度由里面的数组的数量控制。
-
然后响应界面显示,监听了抽屉组件的显示变量。响应给外面的调用。
-
最后就是选择,然后响应给外面的调用。(传出选中的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="['女','男']" //传进去显示的列表 />
好的。谢谢关注