重要提示
重新安装依赖后一定要重启项目!!!
网上搜到的案例拿过来都报错?那应该是插件的版本不一样,先弄清版本!!!
本示例相关版本如下
npm i vue-codemirror@6 // 按自己所需的语言装,需要支持js就安装这个
npm i @codemirror/lang-javascript// yaml语言就装这个,其他语言同理
npm i @codemirror/lang-yaml // 其中的一种深色主题
npm i @codemirror/theme-one-dark
vue-codemirror 说明
这个插件版本差异真的巨大,我在网上窜来窜去好久,搜到的很多例子实现方法各不相同怎么都有报错,后来才弄清楚这版本问题,差太多了。
vue codemirror v5/v6已经发布。这是一个基于以下内容的新版本CodeMirror@6并且仅对Vue3可用。自从CodeMirror@6新版本将不再支持直接浏览器引用UMD模块。简而言之,新版本是与之前的版本完全不兼容。
封装一个yaml代码编辑器的组件
示例效果如图
子组件代码
<template><Codemirror:model-value="modelValue":style="editorConfig.style":extensions="editorConfig.extensions"@change="codeChange"></Codemirror>
</template>
<script lang="ts" setup>
import { Codemirror } from "vue-codemirror"
// 语言和主题也需要安装对应的依赖
import { javascript } from "@codemirror/lang-javascript"
import { yaml } from '@codemirror/lang-yaml'
import { oneDark } from "@codemirror/theme-one-dark"defineProps({modelValue: {type: String,default: ''}
})const emit = defineEmits(['update:modelValue'])// const lang = { javascript, yaml }['yaml']这行代码没有什么深义,只是个新写法,也可以不要
// 然后extensions: [lang(), oneDark]这里 lang()直接写对应的语言yaml()或者javascript()这种就行
const lang = { javascript, yaml }['yaml']
const editorConfig = {style: {height: '350px',fontSize: '18px'},extensions: [lang(), oneDark]
}const codeChange = (newVal: any) => {emit('update:modelValue', newVal)
}
</script>
<style scoped></style>
父组件代码
<template><div>父组件中获取数据:{{ yamlCode }}<div class="code-mirror"><YamlEditor v-model="yamlCode"></YamlEditor></div></div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import YamlEditor from '@/components/YamlEditor.vue';const yamlCode = ref();// 这个变量可以向子组件传默认的数据,也可以实时同步子组件里更新后的数据
</script>
<style scoped>
.code-mirror {width: 500px;
}
</style>
总结
1、vue3项目中通过vue-codemirror6.0插件实现yaml代码编辑器,本例只实现了基础的引入和语言主题的设置,还有拼写检查、错误提示、快捷提示等功能有待完善,我也还没研究出来;
2、本例只给出1种主题和2种语言的安装,想要获取很多主题和语言,得自己上网搜下名字叫啥然后去安装:
npm i @codemirror/lang-xxx
npm i @codemirror/theme-xxx
3、vue3中自定义组件封装如何使用v-model实现双向通信,也可以参考本例