vue-codemirror

使用

1.命令行安装

npm install vue-codemirror --save
// cnpm install vue-codemirror --save

如果运行官网例子时, 报错:

@codemirror/lang-javascript
@codemirror/theme-one-dark

可以在终端中安装对应文件, 解决问题

npm i  @codemirror/lang-javascript
npm i  @codemirror/theme-one-dark

2.在需要的组件中配置

<template><codemirrorv-model="code"placeholder="Code gose here...":style="{ height: '400px' }":autofocus="true":indent-with-tab="true":tabSize="2":extensions="extensions"@ready="log('ready', $event)"@change="log('change', $event)"@focus="log('focus', $event)"@blur="log('blur', $event)"/>
</template><script>
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";import { ref } from "vue";
export default {components: {Codemirror,},setup() {const code = ref(`console.log('Hello, world!')`);const extensions = [javascript(), oneDark];return {code,extensions,log: console.log,};},
};
</script>

配置说明:

个人代码编辑区Demo

代码编辑区
支持代码编辑区, 满足白天/黑夜主题切换, 满足c++/python语言切换
不足, 没有满足代码提示

组件代码 vue3

<template><button @click="changeTheme($event)">黑夜</button><button @click="changeMode($event)">C++</button><codemirrorv-model="code"placeholder="Code gose here...":style="style":mode="mode":spellcheck="spellcheck":autofocus="autofocus":indent-with-tab="indentWithTab":tabSize="tabSize":extensions="extensions"@ready="log('ready', $event)"@change="log('change', $event)"@focus="log('focus', $event)"@blur="useEditedCode"/>
</template><script>
import { Codemirror } from "vue-codemirror";
import { python } from "@codemirror/lang-python";
import { cpp } from "@codemirror/lang-cpp";import { oneDark } from "@codemirror/theme-one-dark";
import "codemirror/addon/hint/show-hint.css";import { reactive, ref, toRefs } from "vue";export default {components: {Codemirror,},setup() {// 数据const code = ref(``);let selectValue = "cpp";let dateTime = "黑夜";const options = reactive({style: { height: "400px" },mode: "text/x-c++src",spellcheck: true,autofocus: true,indentWithTab: true,tabSize: 2,extensions: [cpp(), oneDark], //传递给CodeMirror EditorState。创建({扩展})});// 方法// 失去焦点时,使用已编辑的代码function useEditedCode() {console.log("@@@blur@@@code:", code.value);console.log("@@@blur@@@cpp:", cpp);}// 改变主题function changeTheme(e) {console.log("options.extensions:", options.extensions);if (e.target.innerHTML === "黑夜") {options.extensions = [];dateTime = e.target.innerHTML = "白天";} else {options.extensions = [oneDark];dateTime = e.target.innerHTML = "黑夜";}}// 改变模式function changeMode(e) {console.log("selectValue:", selectValue);if (selectValue === "cpp") {if (dateTime === "黑夜") options.extensions = [python(), oneDark];else options.extensions = [python()];selectValue = "python";e.target.innerHTML = "python";options.mode = "text/x-python";} else {if (dateTime === "黑夜") options.extensions = [cpp(), oneDark];else options.extensions = [cpp()];selectValue = "cpp";e.target.innerHTML = "C++";options.mode = "text/x-c++src";}}// 返回return {code,selectValue,dateTime,...toRefs(options),log: console.log,useEditedCode,changeTheme,changeMode,};},
};
</script>

新手作品, 暂时记录, 如有改进或增加, 以后会更新

前端插件库之vue3使用vue-codemirror插件相关推荐

前端插件库之vue3使用v-md-editor插件
vue3使用v-md-editor插件 v-md-editor 相关配置 [ -- 中文文档](http://ckang1229.gitee.io/vue-markdown-editor/zh/) 使 ...
前端插件库之vue3使用vue3-cropper上传头像（裁剪图片、上传）
一.vue3-cropper官网 vue3 github的readme 非vue3可以参考这份demo 二.使用 1.命令行安装 npm install vue3-cropper -S 2.组件内使用 ...
ajax插件库,03.vue-ajax、vue UI 组件库
vue-ajax vue 项目中常用的 2 个 ajax 库 vue-resource: vue 插件, 非官方库, vue1.x 使用广泛 axios: 通用的 ajax 请求库, 官方推荐, vu ...
分享一个简单好看的html的表格table（个人简历的html表格），vue table，以及vue打印（简单好用的vue打印插件）
想写一个很普通的那种像word文档样式的table,发现网上很多都是什么教程,没有合适的,我只想要一个拿来就能用的html的table(非专业前端),没有什么别的依赖,而且样式要很普通的简单的表格.既 ...
（18）Vue DevTools插件
一.Vue DevTools插件介绍 Vue DevTools插件是 Vue.js 官方提供的用来调试 Vue 应用的工具. 二.Vue DevTools插件安装安装地址如下: https://ch ...
风琴html插件,简洁实用的BootStrap jQuery手风琴插件
前端简洁实用的jQuery手风琴插件|DEMO_jQuery之家-自由分享jQuery.html5.css3的插件库简洁实用的jQuery手风琴插件 A jQuery accordion plug ...
实用VUE 开发插件！！前端必备
element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...
Vue插件库汇总，收藏学习！
前言这是github上由OpenDigg整理并维护的Vue相关开源项目库集合,写进博客里方便自己学习时查找. 原文:https://github.com/opendigg/awesome-githu ...
史上最全的vue插件库
无意间发现的一个整合内容,超级强大,赶紧记录下来!原文链接内容 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2 ...

前端插件库之vue3使用vue-codemirror插件

vue3插件vue-codemirror使用步骤和实例

vue-codemirror

使用

配置说明:

个人代码编辑区Demo

前端插件库之vue3使用vue-codemirror插件相关推荐

最新文章

热门文章