官網示例:
<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