我要评论vue3.0-monaco组件封装存档
<template>
<div
ref="main"
class="codeeditbox editor-container"
style="width: 100%; height: 400px"
/>
</template>
<script lang="ts" setup>
import { ref, onmounted, onunmounted } from 'vue'
import * as monaco from 'monaco-editor'
import { language } from 'monaco-editor/esm/vs/basic-languages/sql/sql'
const { keywords } = language
const main = ref()
const tables = {
users: ['name', 'id', 'email', 'phone', 'password'],
roles: ['id', 'name', 'order', 'created_at', 'updated_at', 'deleted_at'],
}
let editor: monaco.editor.istandalonecodeeditor
const props = defineprops({
initvalue: {
type: string,
default: '',
},
})
const emit = defineemits(['update:initvalue', 'change', 'ctrls'])
const defaultoptions: any = {
// theme, // 主题
value: props.initvalue, // 默认显示的值
language: 'sql', // 语言
folding: true, // 是否折叠
minimap: {
// 关闭小地图
enabled: false,
},
wordwrap: 'on',
wrappingindent: 'indent',
foldinghighlight: true, // 折叠等高线
foldingstrategy: 'indentation', // 折叠方式 auto | indentation
showfoldingcontrols: 'always', // 是否一直显示折叠 always | mouseover
disablelayerhinting: true, // 等宽优化
emptyselectionclipboard: false, // 空选择剪切板
selectionclipboard: true, // 选择剪切板
// automaticlayout: true, // 自动布局
// overviewrulerborder: false, // 不要滚动条的边框
codelens: true, // 代码镜头
scrollbeyondlastline: true, // 滚动完最后一行后再滚动一屏幕
colordecorators: true, // 颜色装饰器
accessibilitysupport: 'on', // 辅助功能支持 "auto" | "off" | "on"
linenumbers: 'on', // 行号 取值： "on" | "off" | "relative" | "interval" | function
linenumbersminchars: 5, // 行号最小字符 number
// enablesplitviewresizing: 'on',
// readonly: false, // 是否只读 取值 true | false
fixedoverflowwidgets: true,
quicksuggestions: true,
// acceptsuggestiononenter: 'on',
theme: 'vs',
formatonpaste: true, // 粘贴时自动格式化
}
onmounted(() => {
initautocompletion()
init()
})
onunmounted(() => {
editor.dispose()
})
function init() {
// 使用 - 创建 monacoeditor 对象
editor = monaco.editor.create(
document.queryselector('.codeeditbox') as htmlelement,
defaultoptions,
)
// 监听值的变化
editor.ondidchangemodelcontent((val: any) => {
const text = editor.getvalue()
emit('update:initvalue', text)
})
}
// 覆盖默认ctrl+s浏览器保存
onmounted(() => {
window.addeventlistener('keydown', handlekeydown)
})
const handlekeydown = (event) => {
if (event.ctrlkey && event.key === 's') {
event.preventdefault() // 阻止浏览器默认的保存操作
// 执行调试
emit('ctrls')
}
}
/**
* @description: 初始化自动补全
*/
function initautocompletion() {
monaco.languages.registercompletionitemprovider('sql', {
// 触发提示的字符
triggercharacters: ['.', ' ', ...keywords],
providecompletionitems: (model, position) => {
let suggestions: any = []
// 行号，列号
const { linenumber, column } = position
// 光标之前的所有字符，即从这一行的 0 到当前的字符
const textbeforepointer = model.getvalueinrange({
startlinenumber: linenumber,
startcolumn: 0,
endlinenumber: linenumber,
endcolumn: column,
})
// trim() 取消两边空格，保证拆分出来前后都不是空值
// \s是指空白，包括空格、换行、tab缩进等所有的空白
const words = textbeforepointer.trim().split(/\s+/)
// 最后的一个有效词
const lastword = words[words.length - 1]
if (lastword.endswith('.')) {
// 如果这个词以 . 结尾，那么认为是希望补全表的字段
// 拿到真实的表名，把 . 去掉
const tablename = lastword.slice(0, lastword.length - 1)
if (object.keys(tables).includes(tablename)) {
suggestions = [...getfieldssuggest(tablename)]
}
} else if (lastword === '.') {
// 如果这个词本身就是一个 . 即点前面是空的，那么什么都不用补全了
// 按理说这应该是个语法错误
suggestions = []
} else {
// 其他时候都补全表名，以及关键字
suggestions = [...gettablesuggest(), ...getkeywordssuggest()]
}
return {
suggestions,
}
},
})
}
/**
* @description: 获取关键字的补全列表
* @tips: completionitemkind 的所有枚举可以在monaco.d.ts 文件中找到，有二十多个，取需即可
*/
function getkeywordssuggest() {
return keywords.map((key) => ({
label: key, // 显示的名称
kind: monaco.languages.completionitemkind.keyword,
inserttext: key, // 真实补全的值
}))
}
/**
* @description: 获取表名的补全列表
*/
function gettablesuggest() {
return object.keys(tables).map((key) => ({
label: key, // 显示的名称
kind: monaco.languages.completionitemkind.variable,
inserttext: key, // 真实补全的值
}))
}
watch(() => props.initvalue, (newval) => {
console.log('newval', newval)
editor.setvalue(newval)
})
/**
* @description: 根据表名获取字段补全列表
* @param {*} tablename
*/
function getfieldssuggest(tablename) {
const fields = tables[tablename]
if (!fields) {
return []
}
return fields.map((name) => ({
label: name,
kind: monaco.languages.completionitemkind.field,
inserttext: name,
}))
}
</script>
<style>
.editor-container {
border: 1px solid #ccc;
}
</style>解析
editor.ondidchangemodelcontent当编辑器内容发生变化时触发，如：输入、删除、粘贴等
双向绑定
由于在外部动态改变initvalue的值无法更新编辑器的值，所以添加watch监听initvalue的值动态设置进编辑器
watch(() => props.initvalue, (newval) => {
editor.setvalue(newval)
})使用
<monacoeditor
language="json"
v-model:initvalue="clickitem.form"
ref="monacoref"
/>到此这篇关于vue3.0-monaco组件封装存档的文章就介绍到这了,更多相关vue3.0组件封装存档内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论