zoukankan      html  css  js  c++  java
  • vue在光标的位置插入内容

    一,在textarea中加入id

     <el-form-item :label="$t('message_template_content')" prop="content">
              <el-input
                type="textarea"
                id="textarea"
                :autosize="{ minRows: 5, maxRows: 10}"
                :placeholder="$t('common_input')"
                v-model="messageTemplate.content"
              />
            </el-form-item>

    二、在methods中写入方法

    async insertVariable(value) {
          const myField = document.querySelector('#textarea');
          // const myField = this.$refs.singleText;
          console.log('myField--',myField);
          if(myField.selectionStart || myField.selectionStart === 0) {
            let startPos = myField.selectionStart;
            let endPos = myField.selectionEnd;
            this.messageTemplate.content = myField.value.substring(0, startPos) + value
                        + myField.value.substring(endPos, myField.value.length);
            await this.$nextTick() // 这句是重点, 圈起来
            myField.focus();
            myField.setSelectionRange(endPos + value.length, endPos + value.length);
          } else {
            this.messageTemplate.content = value;
          }
        },
    

      

  • 相关阅读:
    Atlas
    MHA高可用
    Mycat 读写分离
    数据库 基于GTID主从复制
    DHCP服务
    python垃圾回收机制
    深拷贝、浅拷贝、引用(总结)
    python内存管理机制
    web安全-横向越权与纵向越权
    登录功能SQL注入
  • 原文地址:https://www.cnblogs.com/tanweiwei/p/13847926.html
Copyright © 2011-2022 走看看