在项目中,很多人会遇到选择时间、地点、类别等需求,需要自定义选择器,那么这个选择框避免不要要改样式
- 要在picker-view上加
indicator-class="picker-box"
- 修改的样式为
/deep/ .picker-box { width: 100%; height: 99rpx; background-color: rgba(26, 176, 104, 0.1); z-index: 1; } //给选中的添加border-radius /deep/ .view-column.second .picker-box { border-radius:0 20rpx 20rpx 0; } /deep/ .view-column.first .picker-box { border-radius: 20rpx 0 0 20rpx; } // 修改原有的上下边框颜色 /deep/ .picker-box::after { border-bottom: 0 solid rgba(26, 176, 104, 0.1); } /deep/ .picker-box::before { border-top: 0 solid rgba(26, 176, 104, 0.1); }
完整代码如下
<template> <u-popup :show="show&