vue-quill-editor的自定義設置字數長度方法和顯示剩余數字

先給大家看一下我想要的效果，獻上img：

 

 

 

效果就是這樣啦，讓每次輸入的字數和下面對應:

頁面：

 

<el-form-item label="單位簡介" prop="intro" class="unitBrief" style="position:relative">

        <quill-editor ref="myQuillEditor" v-model="form.intro" :options="editorOption"  @change="onEditorChange($event)" />

        <span class="wordNumber">{{TiLength}}/800</span>

 </el-form-item>

展示輸入顯示剩余數字，然后在data里面定義長度：

 

 

 

默認初始為0

methods里面：

    onEditorChange(e){

       e.quill.deleteText(800,4);

      if(this.form.intro==''){

        this.TiLength=0

      }else{

        this.TiLength=e.quill.getLength()-1

      }

    }

 

注：event.quill.deleteText(800, 4)這里第一個參數設置可輸入的字數
下面的判斷中event.quill.getLength() - 1
這里減1是因為這富文本自帶第一次默認有一個由’\ n’表示的空白行，因此getLength將返回1。