首页 前端知识 Vue3 elementPlus 修改el-drawer 封装buttomSelector

Vue3 elementPlus 修改el-drawer 封装buttomSelector

2024-08-16 22:08:40 前端知识 前端哥 510 707 我要收藏

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="['女','男']"                  //传进去显示的列表
        />
    

    好的。谢谢关注

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15849.html
标签
评论
发布的文章

XML与JSON的使用

2024-08-23 21:08:27

npm i 常见问题

2024-08-23 20:08:23

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!