小程序封装一个有输入框的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 ;

    }

}

巴特西

小程序封装一个有输入框的modal层组件

最新文章

热门文章