在光标处插入文字

最新推荐文章于 2024-09-11 15:33:18 发布

weixin_44653493

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量255

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_44653493/article/details/129527172

版权

文章介绍了在Vue.js环境中，如何处理点击span标签后将内容插入到el-inputtextarea的光标位置。通过v-for循环获取span内容，并使用insertTextAtCursor方法实现动态插入，同时处理了括号等特殊字符的情况，确保光标位置正确。

摘要由CSDN通过智能技术生成

点击span标签，使span标签的内容插入到input光标处

           <el-input
              ref="formulaTextareaRef"
              v-model="expression"
              type="textarea"
              placeholder="示例：(月度设备可利用率-98%)/0.1*10"
              autosize
            />

span内容通过for循环获取

			<span
			  v-for="op in visibleOperators"
			  :key="op.value"
			  :value="op.value"
			  :label="op.value"
			  @click="insertTextAtCursor(op.value)"
			  >{{ op.value }}</span>

光标处插入文字


    async insertTextAtCursor(value) {
      // 获取input标签
      const textarea = this.$refs.formulaTextareaRef.$el.children[0]
      const startPos = textarea.selectionStart
      const endPos = textarea.selectionEnd
      this.expression = textarea.value.slice(0, startPos) + value + textarea.value.slice(endPos, textarea.value.length)
      await nextTick()
      textarea.focus()
      if (value.slice(-2) === '()') {
        textarea.setSelectionRange(startPos + value.length - 1, startPos + value.length - 1)
      } else {
        textarea.setSelectionRange(startPos + value.length, startPos + value.length)
      }
    },