<template>
|
<div style="position:relative">
|
<div
|
:id="'my-monaco-' + idSubfix"
|
class="my-monaco"
|
:style="{ height: monacoHeight + 'px' }"
|
@contextmenu="rightClick"
|
@click="clickMonaco(idSubfix)"
|
></div>
|
<div
|
ref="rightClickInfoDiv"
|
style="position: absolute;top:0px;left:0px;background:#ffffff;height: 0px;width:0px;z-index: 9999;border:1px solid #EAEBED;border-radius:5px;"
|
:class="[showRightClickContent ? 'rightClickInfoDiv' : '']"
|
>
|
<div style="width:100%;height: 100%;" v-show="showRightClickContent">
|
<div
|
style="width:100%;height:25px;background:#ccc;text-align:right;line-height:25px;"
|
>
|
<span
|
style="font-size:12px;cursor: pointer;color: red;"
|
@click="cancel"
|
>取消</span
|
>
|
<span
|
style="margin-right:5px;margin-left:5px;font-size:12px;cursor: pointer;color: #006eff;"
|
@click="selectItems"
|
>确定</span
|
>
|
</div>
|
<div style="width:100%;height:calc(100% - 25px);overflow: auto;">
|
<div
|
v-for="(item, index) in items"
|
:key="item.id"
|
style="font-size:12px;margin-top:0px;padding-left:4px;cursor: pointer;line-height:24px;"
|
class="showRightClickContentItemDiv"
|
@click="clickItem(item.id)"
|
>
|
<span
|
v-show="findItemSelect(item.id)"
|
style="display:inline-block;height: 12px;width: 12px;background:green;border-radius:50%"
|
></span>
|
<span
|
v-show="!findItemSelect(item.id)"
|
style="display:inline-block;height: 12px;width: 12px;background:transparent;border-radius:50%"
|
></span>
|
<span style="margin-left:3px;"
|
>{{ item.parameterItem }}({{ item.code }})</span
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as monaco from 'monaco-editor'
|
|
export default {
|
props: {
|
monacoValue: {
|
type: String,
|
default: ''
|
},
|
items: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
idSubfix: {
|
type: String,
|
default: ''
|
},
|
monacoHeight: {
|
type: Number,
|
default: 100
|
},
|
//默认选中参数项
|
itemId: {
|
type: Number,
|
default: null
|
}
|
},
|
data() {
|
return {
|
language: 'javascript',
|
codeEditor: null,
|
showRightClickContent: false,
|
itemFlags: []
|
}
|
},
|
mounted() {
|
// 初始化monaco-editor
|
this.codeEditor = monaco.editor.create(
|
document.getElementById('my-monaco-' + this.idSubfix),
|
{
|
value: this.monacoValue,
|
language: this.language,
|
scrollbar: {
|
horizontalScrollbarSize: 7,
|
verticalScrollbarSize: 7
|
},
|
minimap: {
|
enabled: false
|
},
|
quickSuggestions: false,
|
lineNumbers: 'off',
|
lineDecorationsWidth: 0
|
}
|
)
|
},
|
methods: {
|
// 右击鼠标，弹出右键信息div
|
rightClick(e) {
|
this.itemFlags.forEach((item) => {
|
if (this.itemId && this.itemId == item.id) {
|
item.selected = true
|
} else {
|
item.selected = false
|
}
|
})
|
const currPosition = this.getPosition()
|
const visiblePosition = this.getVisiblePosition({
|
column: currPosition.column,
|
lineNumber: currPosition.lineNumber
|
})
|
this.$refs.rightClickInfoDiv.style.left = visiblePosition.left + 'px'
|
this.$refs.rightClickInfoDiv.style.top = visiblePosition.top + 19 + 'px'
|
this.$refs.rightClickInfoDiv.style.width = '220px'
|
this.$refs.rightClickInfoDiv.style.height = '260px'
|
this.showRightClickContent = true
|
},
|
resize() {
|
if (this.codeEditor) {
|
this.codeEditor.layout()
|
}
|
},
|
// 获取编辑器光标当前的位置(行、列)，无光标时，默认第1行、第1列
|
getPosition() {
|
return this.codeEditor.getPosition()
|
},
|
// 设置编辑器内容
|
setVal(newValue) {
|
this.codeEditor.setValue(newValue)
|
},
|
// 获取编辑器的内容
|
getVal() {
|
return this.codeEditor.getValue()
|
},
|
// 根据行号，获取当前行文本内容的长度
|
getLineLength(lineNumber) {
|
return this.codeEditor.getModel().getLineLength(lineNumber)
|
},
|
getTop() {
|
return this.codeEditor.getScrollTop()
|
},
|
getLeft() {
|
return this.codeEditor.getScrollLeft()
|
},
|
getWidth() {
|
return this.codeEditor.getScrollWidth()
|
},
|
// 根据行号、列号，获取当前位置的相对top、left
|
getVisiblePosition(x) {
|
return this.codeEditor.getScrolledVisiblePosition(x)
|
},
|
// 选中右键列表选项
|
selectItem(label) {
|
let index = this.getPosition().column
|
const lineNumber = this.getPosition().lineNumber
|
let preIndex = 0
|
if (lineNumber > 1) {
|
for (let i = 1; i <= lineNumber - 1; i++) {
|
preIndex += this.getLineLength(i) + 2
|
}
|
}
|
index = index + preIndex
|
const pre = this.getVal().substring(0, index - 1)
|
const fix = this.getVal().substring(index - 1)
|
this.setVal(pre + label + fix)
|
},
|
// monaco点击事件，触发的回调函数
|
clickMonaco(identify) {
|
this.$emit('clickMonaco', identify)
|
this.closeRightClickInfoDiv()
|
},
|
// 隐藏rightClickInfoDiv
|
closeRightClickInfoDiv() {
|
this.$refs.rightClickInfoDiv.style.left = '0px'
|
this.$refs.rightClickInfoDiv.style.top = '0px'
|
this.$refs.rightClickInfoDiv.style.width = '0px'
|
this.$refs.rightClickInfoDiv.style.height = '0px'
|
this.showRightClickContent = false
|
},
|
cancel() {
|
this.closeRightClickInfoDiv()
|
},
|
findItemSelect(id) {
|
const itemFlag = this.itemFlags.find((item) => {
|
return item.id === id
|
})
|
if (itemFlag) {
|
return itemFlag.selected
|
} else {
|
return false
|
}
|
},
|
clickItem(id) {
|
const itemFlag = this.itemFlags.find((item) => {
|
return item.id === id
|
})
|
if (itemFlag) {
|
itemFlag.selected = !itemFlag.selected
|
}
|
},
|
selectItems() {
|
const selectedItems = this.items.filter((item) => {
|
return this.findItemSelect(item.id)
|
})
|
if (selectedItems && selectedItems.length > 0) {
|
let resultStr = ''
|
selectedItems.forEach((item) => {
|
resultStr += 'V[' + item.code + '],'
|
})
|
resultStr = resultStr.substring(0, resultStr.length - 1)
|
this.selectItem(resultStr)
|
}
|
this.closeRightClickInfoDiv()
|
}
|
},
|
watch: {
|
items: {
|
handler(newValue, oldValue) {
|
this.closeRightClickInfoDiv()
|
this.itemFlags = []
|
if (newValue) {
|
if (newValue.length > 0) {
|
let itemFlag
|
newValue.forEach((item) => {
|
itemFlag = { id: item.id, selected: false }
|
this.itemFlags.push(itemFlag)
|
})
|
}
|
}
|
},
|
deep: true
|
}
|
},
|
destoryed() {
|
if (this.codeEditor) {
|
this.codeEditor.dispose()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.my-monaco >>> .margin {
|
/*display: none;*/
|
background: #f0f0f0;
|
}
|
.my-monaco >>> .monaco-scrollable-element .lines-content {
|
/*display: none;*/
|
background: #f8f8f8;
|
}
|
.my-monaco >>> .shadow-root-host {
|
display: none !important;
|
}
|
.my-monaco >>> .shadow-root-host .context-view {
|
display: none !important;
|
}
|
.my-monaco >>> .context-view {
|
display: none !important;
|
}
|
.showRightClickContentItemDiv:hover {
|
background: #e8e8e9;
|
}
|
.rightClickInfoDiv {
|
box-shadow: 1px 1px #9f9f9f;
|
}
|
</style>
|
