当前位置:首页 > 微信 > 正文

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

11-25 微信

标签:ace   radius   rgb   code   简单   NPU   alc   oda   spl   

其实很简单,就是在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层组件

标签:ace   radius   rgb   code   简单   NPU   alc   oda   spl   

温馨提示: 本文由杰米博客推荐,转载请保留链接: https://www.jmwww.net/weixin/15623.html

博客主人杰米WWW
杰米博客,为大家提供seo以及it方面技巧喜欢的朋友收藏哦!
  • 11365文章总数
  • 2266821访问次数
  • 建站天数
  • 头条文章

    图文推荐

    站长推荐

    友情链接