uni-app中textarea中的字数限制问题

<template>
    <view class="page">
        <view class="content">
            <view class="input_text">
                <input type="text" v-model="title" placeholder="請輸入標題"/>
            </view>
            <view class="text">
                <textarea maxlength="140" v-model="content" rows="2" placeholder="請輸入您要留言的內容" placeholder-class="plac" @input="conInput"></textarea>
                <view class='text_right'>
                    <view class="em" style='color:red'>{{tatVal}}</view>/<view class="span">140</view>
                </view>
            </view>  
        </view> 
    </view>
</template>
     
<script>
    var guid = uni.getStorageSync('guid'); 
    export default {
        computed: {
        },
        data() {
            return {
                title:'',
                content:'',
                tatVal: 0
            };
        },
        onLoad() {
            
        },
        onNavigationBarButtonTap(btn){
            if(btn.index==0){
                if(this.title==""){
                    uni.showToast({
                        icon: 'none',
                        title: '標題不能為空'
                    });
                }else if(this.content==""){
                    uni.showToast({
                        icon: 'none',
                        title: '內容不能為空'
                    });
                }else{
                    this.getNews();
                }
            }
        },
        methods:{
            conInput(){
                this.tatVal = this.content.length;
                if(this.tatVal == 140){
                    uni.showToast({
                        icon: 'none',
                        title: '最多只能輸入140個字'
                    });
                }
            },
            getNews(){
                // 请求
                var url = this.$url+'messageBoard';
                console.log(JSON.stringify(url));
                uni.request({
                    url: url,
                    data: {
                        guid: guid,
                        title: this.title,
                        content: this.content
                    },  
                    method:'POST',
                    success: (res) => {
                        console.log(JSON.stringify(res));
                        if(res.data.code==1){
                            uni.showToast({
                                title: '留言成功',
                                icon: "none",
                            });    
                            setTimeout(()=>{
                                uni.navigateBack({
                                    delta:1
                                });
                            },1000);
                        }else {
                            uni.showToast({
                                title: '留言失敗',
                                icon: "none",
                            });    
                        }
                    },
                    fail: (data, code) => {
                        uni.showToast({
                            title: '網絡異常',
                             icon: "none",
                        });    
                    }
                });
            }
        },
    }
</script>

<style>
    .order-btn{display: block;width: 95%;height:90upx;line-height: 90upx;text-align: center;color: white;font-size:32upx;background-color: #e11c1c;border-radius:20upx;margin:0upx auto;}
    .input_text{
        width: 90%;
        height: 100upx;
        margin: 20upx auto;
        background-color: #fff;
        border-radius: 20upx;
    }
    .input_text input{
        border: none;
        border-radius: 16upx;
        padding: 20upx;
    }
    ::-webkit-input-placeholder{
        color: #ccc;
        font-size: 14px;
        
    }
    .text{
        width: 90%;
        height: 400upx;
        margin: 10upx auto;
    }
    .text textarea{
        width: 95%;
        height: 400upx;
        background-color: #fff;
        border-radius: 20upx;
        border: none;
        padding: 20upx;
    }
    .text_right{
        position: absolute;
        right: 50upx;
        margin-top: -60upx;
        font-size: 14px;
        display: flex;
    }

</style>
 

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值