需求;点击插入关键字的时候把内容插入到光标所在的位置
效果图:
html:
<div class="temlate-container"> <div class="template-content"> <el-input ref="modelContent" v-model="mould.modelContent" autocomplete="off" :rows="4" placeholder="请输入关键字" type="textarea" style="width:100%" :readonly="readonly" @input="listenKeyword" /> <div v-show="!readonly" class="keyword-content"> <span class="keyword-title">插入关键字</span> <div class="keyword-select"> <div class="mould-key"> <list-code-selector v-model="mouldKeyName" type="mouldKey" :readonly="readonly" @change="handleKeyword" /> <el-button round :loading="loading" type="primary" @click="select">插入关键字</el-button> </div> </div> </div> </div> <div class="example">示例:{{ mould.example }}</div> </div>js方法:
select() { if (isBlank(this.mouldKeyName)) return this.$message.warning('请选择关键字') const dom = this.$refs.modelContent.$refs.textarea console.log('this.mould.modelContent', this.mould.modelContent) let pos = 0 if (dom.selectionStart || dom.selectionStart === 0) { // dom.selectionStart第一个被选中的字符的序号（index），从0开始 pos = dom.selectionStart console.log(' dom.selectionStart', dom.selectionStart) } else if (document.selection) { // IE Support const selectRange = document.selection.createRange() selectRange.moveStart('character', -dom.value.length) pos = selectRange.text.length } console.log('pos', pos) const before = this.mould.modelContent.substr(0, pos) const after = this.mould.modelContent.substr(pos) console.log(pos, 'before', before, 'after===', after) this.mould.modelContent = before + '{' + this.mouldKeyName + '}' + after setTimeout(() => { if (dom.setSelectionRange) { // 当前元素内的文本设置备选中范围 dom.setSelectionRange(pos, pos + this.mouldKeyName.length + 2) console.log('当前元素内的文本设置备选中范围====', pos, pos + this.mouldKeyName.length + 2) } else if (dom.createTextRange) { console.log('聚焦控件后把光标放到最后', dom.createTextRange) // IE Support const range = dom.createTextRange() range.collapse(true) range.moveEnd('character', pos) range.moveStart('character', pos) range.select() } }, 0) this.listenKeyword()//监听输入或选中内容是都括号对应及把选中的name改成example放入对应的示例下 }, // 监听模块内容输入框 listenKeyword() { const modelContent = this.mould.modelContent const getLocalexample = JSON.parse(localStorage.getItem('example')) const haveVal = /\{(.+?)\}/g // {123}|{} 花括号，大括号 const result = modelContent.match(haveVal) if (modelContent.length === 0) { this.mould.example = '' } this.mould.example = modelContent if (isNotBlank(result) && this.isBracketBalance(modelContent)) { this.isSymmetry = false this.mould.example = modelContent result.forEach(code => { getLocalexample.forEach(key => { if (key.example) { if (code === key.code) { this.mould.example = this.mould.example.replace(key.code, key.example) // this.mould.example = this.mould.example.replace(key.code, '{' + key.example + '}') } } else { this.mould.example = this.mould.example.replace(key.code, '{' + this.mouldKeyName + '}') } }) }) } else if (!this.isBracketBalance(modelContent)) { this.isSymmetry = true this.$message.warning('缺少完整括号字符') } }, // 判断括号是否对称 isBracketBalance(str) { var leftBracketNum = 0 var strLength = str.length for (var i = 0; i < strLength; i++) { var temp = str.charAt(i) if (temp === '{') { leftBracketNum++ } if (temp === '}') { leftBracketNum-- } } // 最后判断leftBracketNum，如果为0表示平衡否则不平衡 if (leftBracketNum === 0) { return true } else { return false } },
