小程序封裝一個有輸入框的modal層組件


其實很簡單,就是在modal中添加新的 input

<view>
    <modal class="modal" wx:if="{{!hiddenModal}}"
     title="{{title}}" confirm-text="確定" cancel-text="取消" bindconfirm="modalconfirm" bindcancel="modalcancel">
        <view class="input-line">
            <input placeholder='請輸入內容' maxlength="{{ maxlength }}" bindinput='input' type="text" type="text"  value="{{ textvalue }}" />
            <text>{{ currentlength}}/{{ maxlength }}</text>
        </view>
    </modal>
</view>

.modal{
    width: 540rpx;
    max-width: 540rpx;
    border-radius: 28rpx;
    .input-line {
        display: flex;
        border: 2rpx solid rgba(0, 0, 0, 0.05);
        font-size: 28rpx;
        padding: 16rpx;
        height: 40rpx;
        line-height: 40rpx;
    }
    input,  text{
        display: inline-block;
        vertical-align: top;
    }
    input {
        flex: 1;
    }
    text {
        width: 90rpx;
        color: #FFA004 ;
    }
}



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM