【技术实现步骤摘要】
本专利技术涉及web应用前端开发领域，尤其涉及一种基于monaco editor和vue封装代码编辑框组件的方法、系统及装置。
技术介绍
1、当前，vue作为前端开发领域主流的框架之一，应用广泛。其框架最为显著的特色即组件化，可以将web应用的功能、页面元素或者模块抽离封装成一个可复用的独立组件，降低代码耦合度，提高代码复用度。
2、monaco库作为一款应用于web应用且功能丰富、性能优异的代码编辑器，其在开发过程中被广泛地使用。但是其功能丰富的优点在某些业务场景下造成的结果就是开发过程中配置过于繁琐，api学习成本过大等。且当在业务中频繁使用时，会造成大量的重复代码。
技术实现思路
1、本专利技术目的在于针对现有技术的不足，提出一种基于monaco editor和vue封装代码编辑框组件的方法、系统及装置。
2、本专利技术的目的是通过以下技术方案来实现的：一种基于monaco editor和vue封装代码编辑框组件的方法，该方法包括以下步骤：
3、(1)创建一个vue单文件组件，引入monaco editor的代码模块；
4、(2)在monaco editor的代码模块中的props选项中，配置vue组件参数及参数类型，基于该配置构建代码编辑器及对应的编辑器功能，构建完成获取到一个编辑器实例；
5、(3)在vue组件实例挂载元素之后，获取到对应的dom对象，以该对象为容器，初始化一个代码编辑器的实例对象；
7、(5)注册页面resize事件的回调方法，当外部dom容器大小变更，基于步骤2获取的编辑器执行编辑器实例重新布局的方法；
8、(6)创建一个公共方法，调用编辑器实例的格式化方法，并且在vue组件内部默认展示一个按钮，用来执行该方法；
9、(7)创建一个公共方法，调用编辑器实例获取代码内容的方法并返回该代码内容。
10、进一步地，在vue组件实例销毁之前，销毁编辑器实例对象以及注册在该对象上的交互事件，避免内存泄漏。
11、进一步地，为了避免多个代码编辑框组件使用时互相影响，组件即将被卸载时移除对应的方法，具体为：注销在monaco语言对象上注册的格式化处理规则；移除在页面resize事件上注册的回调方法。
12、第二方面，本专利技术还提供了一种基于monaco editor和vue封装代码编辑框组件的系统，该系统包括vue组件建立模块、参数配置模块、实例对象初始化模块、编辑器方法注册模块、resize事件注册模块、格式化方法调用模块和代码内容获取模块；
13、所述vue组件建立模块用于创建一个vue单文件组件，引入monaco editor的代码模块；
14、所述参数配置模块用于在monaco editor的代码模块中的props选项中，配置vue组件参数及参数类型，基于该配置构建代码编辑器及对应的编辑器功能，构建完成获取到一个编辑器实例；
15、所述实例对象初始化模块用于在vue组件实例挂载元素之后，获取到对应的dom对象，以该对象为容器，初始化一个代码编辑器的实例对象；
16、所述编辑器方法注册模块用于基于props传入的参数，确认代码编辑器中的代码的语言类型，注册编辑器的所需的交互事件，并注册编辑器对该类型语言的格式化处理规则；
17、所述resize事件注册模块用于注册页面resize事件的回调方法，当外部dom容器大小变更，基于编辑器实例获取模块获取的编辑器执行编辑器实例重新布局的方法；
18、所述格式化方法调用模块用于创建一个公共方法，调用编辑器实例的格式化方法，并且在vue组件内部默认展示一个按钮，用来执行该方法；
19、所述代码内容获取模块用于创建一个公共方法，调用编辑器实例获取代码内容的方法并返回该代码内容。
20、第三方面，本专利技术还提供了一种基于monaco editor和vue封装代码编辑框组件的装置，包括存储器和一个或多个处理器，所述存储器中存储有可执行代码，所述处理器执行所述可执行代码时，实现所述的一种基于monaco editor和vue封装代码编辑框组件的方法。
21、第四方面，本专利技术还提供了一种计算机可读存储介质，其上存储有程序，所述程序被处理器执行时，实现所述的一种基于monaco editor和vue封装代码编辑框组件的方法。
22、本专利技术的有益效果：
23、1.本专利技术将代码编辑器的常用功能进行统一的封装和实现，并且提供了简单的配置参数用于功能点的开启关闭，降低了相同开发情景下的使用成本。
24、2.本专利技术利用vue组件的可复用性，将代码编辑器的常用功能封装在组件内部，配合组件的props参数去有选择地使用所需功能，大大地减少了代码的重复度，降低了开发成本，提高了开发效率。
本文档来自技高网...【技术保护点】
1.一种基于monaco editor和vue封装代码编辑框组件的方法，其特征在于，该方法包括以下步骤：
2.根据权利要求1所述的一种基于monaco editor和vue封装代码编辑框组件的方法，其特征在于，在vue组件实例销毁之前，销毁编辑器实例对象以及注册在该对象上的交互事件，避免内存泄漏。
3.根据权利要求1所述的一种基于monaco editor和vue封装代码编辑框组件的方法，其特征在于，为了避免多个代码编辑框组件使用时互相影响，组件即将被卸载时移除对应的方法，具体为：注销在monaco语言对象上注册的格式化处理规则；移除在页面resize事件上注册的回调方法。
4.一种实现权利要求1-3任一项所述基于monaco editor和vue封装代码编辑框组件的方法的基于monaco editor和vue封装代码编辑框组件的系统，其特征在于，该系统包括vue组件建立模块、参数配置模块、实例对象初始化模块、编辑器方法注册模块、resize事件注册模块、格式化方法调用模块和代码内容获取模块；
5.一种基于monaco editor
6.一种计算机可读存储介质，其上存储有程序，其特征在于，所述程序被处理器执行时，实现如权利要求1-3中所述的一种基于monaco editor和vue封装代码编辑框组件的方法。
...【技术特征摘要】
1.一种基于monaco editor和vue封装代码编辑框组件的方法，其特征在于，该方法包括以下步骤：
2.根据权利要求1所述的一种基于monaco editor和vue封装代码编辑框组件的方法，其特征在于，在vue组件实例销毁之前，销毁编辑器实例对象以及注册在该对象上的交互事件，避免内存泄漏。
3.根据权利要求1所述的一种基于monaco editor和vue封装代码编辑框组件的方法，其特征在于，为了避免多个代码编辑框组件使用时互相影响，组件即将被卸载时移除对应的方法，具体为：注销在monaco语言对象上注册的格式化处理规则；移除在页面resize事件上注册的回调方法。
4.一种实现权利要求1-3任一项所述基于monaco editor和vue封装代码编辑框组件...
【专利技术属性】
技术研发人员：王刚，孔倩倩，王新根，彭聪，杨志强，
申请(专利权)人：浙江邦盛科技股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。