博客 / 詳情

返回

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-itemuni-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

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.