hongze_yb_xcx/pages-question/hasQuestion.vue

<template>
  <view class="hasquestion-wrap">
    <view class="title">问题描述</view>
    <textarea
      v-model="text"
      placeholder="请输入问题描述"
      placeholder-class="textarea-placeholder"
      :maxlength="maxlength"
      @input="calcWord"
    />
    <text style="float:right;color:grey;">剩余可输入字数:<text :style="{color:(maxlength-textlength<=10)?'red':'grey'}">{{maxlength-textlength}}</text>字</text>
    <view class="btn-wrap">
      <view class="btn" @click="handleClick">发布提问</view> 
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      text:'',
      textlength:0,
      maxlength:100,
    };
  },
  methods: {
    handleClick(){
      uni.navigateBack({delta:1})
    },
    //计算字数
    calcWord(e){
      this.textlength = e.detail.value.length
    }
  },
};
</script>

<style scoped lang="scss">
.hasquestion-wrap{
  padding:40rpx 34rpx;
  .title{
    margin-bottom: 20rpx;
    font-size: 32rpx;
    color: #333333;
  }
  textarea{
    width:100%;
    height:294rpx;
    box-sizing: border-box;
    padding:30rpx;
    border:1rpx solid #BEBEBE;
    border-radius: 8rpx;
  }
  .btn-wrap{
    margin-top: 120rpx;
    text-align: center;
    .btn{
      display: inline-block;
      width:390rpx;
      height:80rpx;
      background-color: #E6B77D;
      border-radius: 40rpx;
      color: #FFFFFF;
      font-size: 32rpx;
      text-align: center;
      line-height: 80rpx;
    }
  }
  
}
</style>