在输入框光标位置插入字符

当余额撑不起兴趣的时候,所有的爱好都应该是赚钱

我的github: 李大玄
我的私人博客: 李大玄
我的npm开源库: 李大玄
我的简书: 李大玄
我的CSDN: 李大玄
我的掘金: 李大玄
哔哩哔哩: 李大玄
语雀文档: 李大玄

这里只是一个按钮一个输入框的一个简单演示, 如果涉及到循环的地方, 在id的地方加上索引就可以了, 我已经试过了

在这里插入图片描述

<template>
  <div class="">
    <el-button type="primary" @click="concatStr">新增</el-button>
    <el-input v-model="ipt" id="ipt"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ipt: '',
    };
  },
  methods: {
    concatStr() {
      this.insertInputTxt('ipt', '这是插入的内容');
    },
    // 插入字符串
    insertInputTxt(id, insertTxt) {
      var elInput = document.getElementById(id); // 获取dom
      var startPos = elInput.selectionStart;
      var endPos = elInput.selectionEnd;
      if (startPos === undefined || endPos === undefined) return;
      var txt = elInput.value;
      var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos);
      elInput.value = result;
      // 这里比较重要 **给最终绑定的参数 进行赋值
      this.ipt = result; // 赋值
      elInput.focus();
      this.$nextTick(() => {
        elInput.selectionStart = startPos + insertTxt.length;
        elInput.selectionEnd = startPos + insertTxt.length;
      });
    },
  },
};
</script>