uni-easyinput不能设置borderRadius不能设置padding

uni-easyinput不能设置borderRadius不能设置padding

开发环境 版本号 项目创建方式
Windows HBuilderX 
## 操作步骤：


<uni-easyinput class="ipt" v-model="_d.form.a5" :styles="{backgroundColor: '#F8F8F8', borderColor: 'transparent'}" placeholder="请输入意向院校" prefixIcon="search" />  

::v-deep .uni-easyinput__content {  
    overflow: hidden;  
    border-radius: 36rpx;  
    height: 72rpx;  
    background: #F8F8F8;  
    padding: 0 20rpx;  
}

预期结果：

只能支持更多的自定义样式。styles不要固定死，只有这四种color, , disableColor, borderColor。

实际结果：

styles只支持这四种color, , disableColor, borderColor。

bug描述：

uni-app的UI组件库的uni-easyinput组件，不能自定义样式。

在微信小程序中又不能使用::v-deep样式穿透。


3 回复

可以先根据自己的需求修改 uni-easyinput 的源码


自己修改当然可以，但是你们也要把uni-easyinput源码改一下呀。这个组件都出来这么久了

uni-easyinput 组件确实存在样式自定义限制问题。组件目前仅通过 styles 属性支持四种颜色配置，无法直接设置 borderRadius 和 padding。

针对微信小程序无法使用 ::v-deep 的问题，建议改用以下方案：

  1. 使用全局样式覆盖（需注意样式优先级）
.uni-easyinput__content {
  border-radius: 36rpx !important;
  padding: 0 20rpx !important;
}
  1. 通过包裹容器实现圆角效果
<view class="input-wrapper">
  <uni-easyinput 
    class="ipt" 
    :styles="{borderColor:'transparent'}"
  />
</view>

<style>
.input-wrapper {
  border-radius: 36rpx;
  background: #F8F8F8;
  overflow: hidden;
}
</style>
回到顶部