El input text field word limit, beyond which the display turns red and input is prohibited

Effect display

Code ：

  <el-form-item label=" Description of maintenance points ：" prop="remark" :rules="[{ required: true, message: ' Can't be empty ' }]">
            <el-input
              type="textarea"
              @input="timeEffectInput"  //  Input event （ Deal with restrictions here ）
              maxlength="200"  //  Maximum word limit 
              resize="none"    //  Controls whether it can be scaled by the user 
              show-word-limit  //  Whether to display input word count 
              :rows="3"        //  Adaptive content height , Can pass in objects , Such as ,{ minRows: 2, maxRows: 6 }
              style="width: 92%"
              v-model="dialogForm.remark"
              placeholder=" Please enter the description of maintenance points ！"
            ></el-input>
          </el-form-item>

timeEffectInput() {
    
      const length = this.dialogForm.remark.length  //  First get the text length of the current input text field 
      if (length >= 200) {
      //  When the length exceeds 200
      	//  Get the text field count statistics and set the font to red 
        this.$el.querySelector('.el-input__count').style = 'color:red !important' 
       	//  Prevent subsequent input overflow interception 0-200 The characters of 
        this.dialogForm.remark = this.dialogForm.remark.substr(0, 200)
      } else {
    
        //  If it does not exceed, it will be set to the original font color 
        this.$el.querySelector('.el-input__count').style = 'color:#909399 !important'
      }
    },