个人的mint-ui的picker选择器样式修改方案一

最新推荐文章于 2024-05-07 16:35:18 发布

原创最新推荐文章于 2024-05-07 16:35:18 发布 · 4.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#mint-ui #picker #样式方案

前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种移动端弹出选择器的实现方式，通过使用模板代码结合特定样式，实现了高度自定义的选择器组件。该选择器支持底部弹出，并且可以调整宽度、高度等属性，同时提供了字体大小和高亮背景色的自定义设置。

1.模板代码：

<mt-popup v-model="signReasonVisible" position="bottom" style="width:100%;height:43%;" class="popup">
      <mt-picker :slots="slots" @change="setSignReason" style="" :itemHeight="itemHeight" class="picker"></mt-picker>
    </mt-popup>

样式代码：

    /*--------选择器样式-----------*/
    .picker-items{
      height:100%;
    }
    .picker-item{
      font-size:1.38rem;
    }
    .picker-slot-center{
      height:100%;
    }
    .picker-slot-wrapper{
    }
    .picker-center-highlight{
      background-color: #F5F5F9;
      z-index:-100;
    }

2.样式效果：