小程序實現textarea行數自動增長

時間 2019-11-13

標籤程序實現 textarea 行數自動增長简体版

原文原文鏈接

查找網上案例不少，可是都不是很滿意，參考大牛案例終結了一下，話很少說代碼以下：css

實現效果：html

前段代碼微信

<view class="text-box">
      <view>{{currentInput}}</view>
      <textarea class="weui-textarea" placeholder="請輸入文本" bindinput="getInput" maxlength="500"/>
</view>

css代碼ui

.text-box{
    width:750rpx; 
    padding: 20rpx 0;
    box-sizing: border-box;
    position: relative;
    min-height:150rpx;
    max-height:240rpx;
    background: rgb(172, 253, 95)
}
.text-box view{
   display:block;
   visibility:hidden;
   word-break:break-all;
   word-wrap:break-word;
}
.text-box .weui-textarea{
    width: 600rpx;
    height:100%;
    position: absolute;
    left:75rpx;
    top:0rpx;
    overflow-y:hidden;
    word-break:break-all;
    word-wrap:break-word;
}

js代碼this

Page({
    data:{
        currentInput: ''
    },
    getInput: function (e) {
        this.setData({
            currentInput: e.detail.value
        })
    },
})

模擬微信朋友圈評論效果spa

    <view class="comment-reply-focus" v-else>
        <view class="text-box">
            <view>{{ currentInput }}</view>
            <textarea
                class="weui-textarea"
                placeholder="評論 @一見生財"
                focus="true"
                @input="getInput"
                maxlength="500"
                fixed="true"
                :show-confirm-bar="false"
                :adjust-position="true"
                cursor-spacing="20px"
            />
        </view>
        <view class="comment-reply-focus-send" @click.stop="sendComment()">發送</view>
    </view>

.comment-reply-focus {
    width: 100%;
    position: relative;
    padding-left: 40upx;
}
.text-box {
    width: 580rpx;
    padding: 20rpx 0;
    box-sizing: border-box;
    position: relative;
    min-height: 80upx;
    max-height: 160upx;
    line-height: 40upx;
    border: 1upx solid #e5e5e5;
    border-radius: 5upx;
    padding: 20upx;
}
.text-box view {
    display: block;
    visibility: hidden;
    word-break: break-all;
    word-wrap: break-word;
}
.text-box .weui-textarea {
    width: 580upx;
    height: 100%;
    position: absolute;
    left: 0upx;
    top: 0upx;
    overflow-y: hidden;
    word-break: break-all;
    word-wrap: break-word;
    padding: 20upx;
}

.comment-reply-focus-send {
    width: 80upx;
    height: 40upx;
    line-height: 40upx;
    font-size: 30upx;
    text-align: center;
    color: #e84351;
    position: absolute;
    right: 30upx;
    bottom: 0upx;
}

export default {
    data() {
        return {
            currentInput: ''
        };
    },
    methods: {
        getInput(e) {
            this.currentInput = e.detail.value;
        },
        // 發送
        sendComment() {
            console.log(this.currentInput);
        }
    }
};