vue源码系列教程(vue使用引用库中的方法附源码)
类别:编程学习 浏览量:910
时间:2021-10-04 01:59:04 vue源码系列教程
vue使用引用库中的方法附源码monaco-editor-vue的官方源码如下
Index.js
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; function noop() { } export { monaco }; export default { name: 'MonacoEditor', props: { diffEditor: { type: Boolean, default: false }, //是否使用diff模式 width: {type: [String, Number], default: '100%'}, height: {type: [String, Number], default: '100%'}, original: String, //只有在diff模式下有效 value: String, language: {type: String, default: 'javascript'}, theme: {type: String, default: 'vs'}, options: {type: Object, default() {return {};}}, editorMounted: {type: Function, default: noop}, editorBeforeMount: {type: Function, default: noop} }, watch: { options: { deep: true, handler(options) { this.editor && this.editor.updateOptions(options); } }, value() { this.editor && this.value !== this._getValue() && this._setValue(this.value); }, language() { if(!this.editor) return; if(this.diffEditor){ //diff模式下更新language const { original, modified } = this.editor.getModel(); monaco.editor.setModelLanguage(original, this.language); monaco.editor.setModelLanguage(modified, this.language); }else monaco.editor.setModelLanguage(this.editor.getModel(), this.language); }, theme() { this.editor && monaco.editor.setTheme(this.theme); }, style() { this.editor && this.$nextTick(() => { this.editor.layout(); }); } }, computed: { style() { return { width: !/^\d+$/.test(this.width) ? this.width : `${this.width}px`, height: !/^\d+$/.test(this.height) ? this.height : `${this.height}px` } } }, mounted () { this.initMonaco(); }, beforeDestroy() { this.editor && this.editor.dispose(); }, render (h) { return ( <li class="monaco_editor_container" style={this.style}></li> ); }, methods: { initMonaco() { const { value, language, theme, options } = this; Object.assign(options, this._editorBeforeMount()); //编辑器初始化前 this.editor = monaco.editor[this.diffEditor ? 'createDiffEditor' : 'create'](this.$el, { value: value, language: language, theme: theme, ...options }); this.diffEditor && this._setModel(this.value, this.original); this._editorMounted(this.editor); //编辑器初始化后 }, _getEditor() { if(!this.editor) return null; return this.diffEditor ? this.editor.modifiedEditor : this.editor; }, _setModel(value, original) { //diff模式下设置model const { language } = this; const originalModel = monaco.editor.createModel(original, language); const modifiedModel = monaco.editor.createModel(value, language); this.editor.setModel({ original: originalModel, modified: modifiedModel }); }, _setValue(value) { let editor = this._getEditor(); if(editor) return editor.setValue(value); }, _getValue() { let editor = this._getEditor(); if(!editor) return ''; return editor.getValue(); }, _editorBeforeMount() { const options = this.editorBeforeMount(monaco); return options || {}; }, _editorMounted(editor) { this.editorMounted(editor, monaco); if(this.diffEditor){ editor.onDidUpdateDiff((event) => { const value = this._getValue(); this._emitChange(value, event); }); }else{ editor.onDidChangeModelContent(event => { const value = this._getValue(); this._emitChange(value, event); }); } }, _emitChange(value, event) { this.$emit('change', value, event); this.$emit('input', value); } } }
使用了vue想使用如上库中的_getValue
方法怎么调呢?
定义ref=“”,使用this.$refs.exampleEditor._setValue('')
参考如下代码
test.vue
<template> <li> <MonacoEditor ref="exampleEditor" width="100%" height="300" theme="vs-dark" language="javascript" :options="options" @change="codeInput" /> </li> </template> <script> import MonacoEditor from 'monaco-editor-vue' export default { components: { MonacoEditor }, data() { return { } }, beforeCreate() { }, mounted() { }, methods: { this.$refs.exampleEditor._setValue('') } }
到此这篇关于vue使用引用库中的方法附源码的文章就介绍到这了,更多相关vue使用引用库内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue加载html5动画(vue实现旋转木马动画)
- vue滚动条下拉翻页(Vue中利用better-scroll组件实现横向滚动功能)
- vue 如何执行动态js(如何利用vue.js实现拖放功能)
- vue动态路由实现权限控制(vue2/vue3路由权限管理的方法实例)
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue 怎么设置滚动条的长度(vue使用better-scroll实现横向滚动的方法实例)
- vue中什么时候需要set属性(Vue.set和this.$set使用和区别)
- vue函数中的默认参数(Vue3中SetUp函数的参数props、context详解)
- vue单元测试实例(Vue-Jest 自动化测试基础配置详解)
- vue如何加速(vue函数防抖与节流的正确使用方法)
- vue-router的安装(详解Vue-Router的安装与使用)
- vue改数组和对象值(vue $set 实现给数组集合对象赋值)
- vue常用的指令和修饰符(Vue中 Vue.prototype使用详解)
- vue设置div大小(Vue实现div滚轮放大缩小)
- vuetable表格合并(vue-table实现添加和删除)
- 金球奖只青睐那些会戴珠宝的女人(金球奖只青睐那些会戴珠宝的女人)
- 浙江省一个县,人口超40万,建县历史超1100年(浙江省一个县人口超40万)
- 五代十国南唐历代国君(五代十国南唐历代国君)
- 飞机引进工程师杨隆 匠人匠心,只争朝夕(飞机引进工程师杨隆)
- 三人行,她们是育人路上的 铁三角 团队(她们是育人路上的)
- 阴阳师 孟婆山兔CP不倒 新皮肤草稿 孟婆兔 让痒痒鼠点赞(阴阳师孟婆山兔CP不倒)
热门推荐
- phplaravel一般开发什么项目(laravel 去掉index.php伪静态的操作方法)
- 云服务器推荐流程(云服务器入门须知的3个技巧)
- sql对象资源管理在哪(SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用)
- php 上传临时文件扩展名(浅析PHP 中move_uploaded_file 上传中文文件名失败)
- mysqlbinlog优缺点(MySQL Binlog 日志处理工具对比分析)
- zabbix支持oracleodbc功能吗(使用zabbix监控oracle数据库的方法详解)
- table表格嵌套,边框重叠变粗的解决
- html5做app流程(html5唤醒APP小记)
- JS脚本中Null与Undefined的区别
- dedecms提示信息(DedeCms fckeditor编辑器空白无法显示的相关问题)