文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3中怎么使用vue-codemirror插件

2023-07-06 11:14

关注

本文小编为大家详细介绍“vue3中怎么使用vue-codemirror插件”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue3中怎么使用vue-codemirror插件”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

使用

1.命令行安装
npm install vue-codemirror --save// cnpm install vue-codemirror --save

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

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

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

npm i  @codemirror/lang-javascriptnpm i  @codemirror/theme-one-dark
2.在需要的组件中配置
<template>  <codemirror    v-model="code"    placeholder="Code gose here..."    :    :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>

配置说明:

vue3中怎么使用vue-codemirror插件

个人代码编辑区Demo

代码编辑区

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

不足, 没有满足代码提示

组件代码 vue3

<template>  <button @click="changeTheme($event)">黑夜</button>  <button @click="changeMode($event)">C++</button>  <codemirror    v-model="code"    placeholder="Code gose here..."    :    :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中怎么使用vue-codemirror插件

vue3中怎么使用vue-codemirror插件

读到这里,这篇“vue3中怎么使用vue-codemirror插件”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯