vue 中使用 codemirror 显示异常,直到点击才可以
加载后refresh()一下(原因据说是多个codemirror相互影响导致,但是我只有一个codemirror的时候也出现这个问题)setTimeout(() => {self.$refs.cmExpressionsRef.codemirror.refresh()},50)控制光标位置例如:在codemirror 绑定变量this.formData.exp,在...
·
加载后refresh()一下(原因据说是多个codemirror相互影响导致,但是我只有一个codemirror 的时候也出现这个问题)
setTimeout(() => {
self.$refs.cmExpressionsRef.codemirror.refresh()
},50)
控制光标位置
例如:在codemirror 绑定变量 this.formData.exp,在光标后加入item字符串到this.formData.exp
<codemirror ref="cmExpressionsRef" v-model="formData.exp" :options="cmOptions"></codemirror>
<Button @click="(ev)=>sqlKeyClick(item)" v-for="item in sqlKeycolumns" :key="item" class="sqlKey">{{item}}</Button>
<Button v-for="item in polymerization" :key="item" @click="(ev)=>polyItemClick(ev,item)" class="sqlKey">{{item}}</Button>
....................................................................
import { codemirror } from 'vue-codemirror'
import 'codemirror/mode/sql/sql.js'
export default {
name: 'ExpressionsModal',
components:{
codemirror
},
props: {
getExpressions: {
type: Function
}
},
data () {
return {
visibleModal: false,
actionType: null,
formData: {
exp: ''
},
sqlKeycolumns: [],
polymerization: ['sum', 'count', 'avg', 'max', 'min', 'distinct'], // sum(count(avg(max(min(distinct())))))
targetDom: '',
parIndex: -1,
sqlEditor: null,
cmOptions: {
mode: 'text/x-mariadb',
indentWithTabs: true,
smartIndent: true,
lineNumbers: true,
matchBrackets: true,
styleActiveLine: true,
cursorHeight:1, // 光标高度
autoRefresh: true
},
curposition:{}
}
},
mounted () {
},
methods: {
handleChange () {
this.$refs.cmExpressionsRef.codemirror.focus()
this.$refs.cmExpressionsRef.codemirror.setCursor(2,1)
this.$nextTick(()=> {
this.$refs.cmExpressionsRef.codemirror.refresh();
})
},
show (row, sqlKeycolumns, expressTree, actionType, parIndex) {
this.visibleModal = true
this.sqlKeycolumns = sqlKeycolumns
this.actionType = actionType
this.parIndex = parIndex
this.targetDom = document.querySelector('#expressionInput textarea')
const self = this
setTimeout(() => {
self.$refs.cmExpressionsRef.codemirror.refresh()
},50)
if (actionType === 'add') {
this.formData = {exp: '', id: guid(), type: 'exp'}
} else {
this.formData = lodash.cloneDeep(row)
}
if (expressTree.length > 0) {
this.formData.staticList = expressTree.map(item => ('${' + item.alias + '}'))
}
},
sqlKeyClick (item) {
this.$refs.cmExpressionsRef.codemirror.focus()
const lastLine = this.$refs.cmExpressionsRef.codemirror.lastLine()// 最后一行序列编码
const getLineContent = this.$refs.cmExpressionsRef.codemirror.getLine(lastLine) // 最后一行内容
this.curposition = this.$refs.cmExpressionsRef.codemirror.getCursor()
//光标前的str
const beforeStr = this.$refs.cmExpressionsRef.codemirror.getRange({line:0,ch:0} , {line:this.curposition.line,ch:this.curposition.ch})
//光标后的str
const afterStr = this.$refs.cmExpressionsRef.codemirror.getRange({line:this.curposition.line,ch:this.curposition.ch} , {line:lastLine,ch:getLineContent.length})
this.formData.exp = beforeStr + item + afterStr
this.$nextTick(() =>{
this.$refs.cmExpressionsRef.codemirror.setCursor(this.curposition.line,this.curposition.ch+item.length)
})
},
polyItemClick (ev, item) {
this.$refs.cmExpressionsRef.codemirror.focus()
const lastLine = this.$refs.cmExpressionsRef.codemirror.lastLine()// 最后一行序列编码
const getLineContent = this.$refs.cmExpressionsRef.codemirror.getLine(lastLine) // 最后一行内容
this.curposition = this.$refs.cmExpressionsRef.codemirror.getCursor()
//光标前的str
const beforeStr = this.$refs.cmExpressionsRef.codemirror.getRange({line:0,ch:0} , {line:this.curposition.line,ch:this.curposition.ch})
//光标后的str
const afterStr = this.$refs.cmExpressionsRef.codemirror.getRange({line:this.curposition.line,ch:this.curposition.ch} , {line:lastLine,ch:getLineContent.length})
this.formData.exp = beforeStr + item + '()' + afterStr
this.$nextTick(() =>{
this.$refs.cmExpressionsRef.codemirror.setCursor(this.curposition.line,this.curposition.ch+item.length+1)
})
},
onSubmit () {
this.getExpressions(this.formData, this.actionType, this.parIndex)
}
}
}
官方api路径:
更多推荐
已为社区贡献9条内容
所有评论(0)