• 点击按钮,在textarea光标位置插入值


    应用场景是一个邮件模板配置的功能,需要点击按钮后在textarea光标位置插入占位符(如下图)

    解决代码如下

       插入动态元素:
      <MdButton class="checkBtn" @click="insert('{message}')">{message}</MdButton>
      <MdInput type="textarea" id="mailTemplate" v-model="detailForm.mailTemplate" :rows="4" :autosize="{minRows: 10, maxRows: 10}"/>
    

    js:

      insert (content) {
        let textInput = document.getElementById('mailTemplate');
        let area = textInput.getElementsByClassName('ivu-input')[0];
        // 获取光标初始索引
        let insert = area.selectionStart;
        // 拼接字符串的形式来得到需要的内容
        area.value = area.value.substr(0, insert) + content + area.value.substr(insert);
        //computed不会计算得重新赋值
        this.detailForm.mailTemplate = area.value;
      },
    

    注:<MdInput>为基于iview二次封装的input组件,主要是获取到<textarea>的selectionStart即为光标位置进行字符串拼接,本来想用ref的方式获取结果不行不知道为啥就还得再看看。
    关键是!(敲黑板!)改变<textarea>的value不会改变双向绑定的值,得手动赋值一下

  • 相关阅读:
    mov与lea
    Android APP启动流程
    Android JAVA转Kotlin速成
    算法学习
    平衡树板子
    舞蹈链板子
    肖sir__会计分录
    多测师肖sir___项目讲解(保险、信贷系统)
    肖sir_医疗系统
    肖sir__性能测试或者压力测试你是怎么做的?
  • 原文地址:https://www.cnblogs.com/yibottlec/p/15467537.html
Copyright © 2020-2023  润新知