zoukankan      html  css  js  c++  java
  • 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。
    时而疯狂女汉子,时而温柔软妹子
  • 相关阅读:
    tableView小细节
    iOS5 切换中文键盘时覆盖输入框的解决方案
    NSBundle读取txt文件,图片,plist
    iOS OC 字符串处理
    图片拉伸 几种方式
    UIAlertView小结
    新来报道
    VC6.0之Debug调试总结
    关于C++中的临时对象问题
    与临时对象的斗争(下)
  • 原文地址:https://www.cnblogs.com/csji/p/13099831.html
Copyright © 2011-2022 走看看