uniapp自定义uni-easyinput样式

官网示例:

<uni-forms-item >
 <uni-easyinput trim="all" v-model="form.address" placeholder="请输入地址" />
</uni-forms-item>

自定义颜色

<uni-forms-item >
 <uni-easyinput trim="all" primaryColor="#FCB334" v-model="form.address" placeholder="请输入地址" />
</uni-forms-item>

通过primaryColor实现自定义边框、按钮icon色

自定义边距、消除边框色、背景色

uni-forms-item在uni-forms表单中有自带的margin-bottom,消除方式如下:

:deep(.uni-forms-item) {
 margin-bottom: 0px;
}

清除边框色、背景色

:deep(.uni-easyinput__content) {
 border: none !important;
 background-color: transparent !important;
}
:deep(.is-input-border) {
 border: none;
}

这样,input就是一个透明的输入框,你可以在input外套一层view,自定义input的样式,我这里做一个演示:

<uni-forms :modelValue="form">
 <view class="input-box">
 <view class="input-box-left">左侧插槽</view>
 
 <view class="input-box-center">
 <uni-forms-item>
 <uni-easyinput trim="all" primaryColor="#FCB334" v-model="form.address" placeholder="请输入地址" />
 </uni-forms-item>
 </view>
 
 <view class="input-box-right">右侧插槽</view>
 </view>
</uni-forms>

.input-box {
 border-radius: 10rpx;
 background: #f0f2f6;
 display: flex;
 align-items: center;
 .input-box-left {
 background: red;
 padding: 0 10rpx;
 }
 .input-box-center {
 flex: 1;
 }
 .input-box-right {
 background: red;
 padding: 0 10rpx;
 }
}

完全自定义输入框,你可以基于此实现很多其它演示,例如:

参考文档:
uniapp:uni-easyinput
uniapp:uni-forms