main.js全局安装

import hkMonacoEditor from 'hk-monaco-editor'
Vue.use(hkMonacoEditor)

Install

1.npm安装：npm install hk-monaco-editor --save

2.yarn安装：yarn add hk-monaco-editor

3.引用 hk-monaco-editor.js

<hk-monaco-editor :completList="completList" ref="monaco" @change="changeContent" readOnly>

@description: 基于Monaco Editor 组件
@param {Array|Object} completList 自动补全数组自定义提示内容当为Object时params:{ [keyWords]:{values:Array,key:sring}},keyWords为触发关键字
@param {Boolean} readOnly 是否为只读 default:false
@param {Boolean} closeMineMap 是否关闭右侧小地图 default:false
@param {Boolean} mouseWheelZoom 是否开启缩放 default:false
@param {Boolean} dragAndDrop 是否开启拖拽 default:false
@param {String} defaultCode 默认展示代码 default:''
@param {String} oldCode 默认旧代码展示 default:'' ---如果存在则会创建diff编辑器
@param {String} language 代码语言类型 default:'sql'
@function: updateOptions() 修改编辑器配置
@function: updateOriginalOptions() 修改旧代码编辑器配置--适用于diff编辑器
@function: updateModifiedOptions() 修改新代码编辑器配置--适用于diff编辑器
@function: setOriginalValue() 修改旧代码编辑器配置的值--适用于diff编辑器
@function: formatSql() 编辑器的内容格式化（sql）
@function: getValue() 获取当前编辑器的内容
@function: setValue(Value:string) 设置当前编辑器的内容
@function: destroyEditor() 销毁当前编辑器
@function: change() 监听变化

import hkMonacoEditor from 'hk-monaco-editor'

Vue.use(hkMonacoEditor)