vue3脚本绑定CodeMirror的使用

news2024/11/16 8:26:14

 代码：

<template>
  <CodeMirror
    ref="codeMirror"
    :value="codeVal"
    :languageSingle="languageSingle"
    :readOnly="!isEdit"
    @submitCode="submitCode"
  >
  </CodeMirror>
</template>

<script setup>
import { getFuncInfo, editFuncInfo } from "@/api/algorithm.js";
import CodeMirror from "@/components/CodeMirror/index.vue";
import { message } from "ant-design-vue";
import { ref, onMounted } from "vue";
const formData = ref({});
const props = defineProps({
  id: { type: String },
  isEdit: { type: Boolean, default: false },
});
const codeVal = ref("");
const formdata = ref({});
const languageSingle = ref({});
function dealData(res) {
  if (JSON.stringify(res) !== "{}") {
    if (res.algorithmBody !== null) {
      const algorithmBody = JSON.parse(res.algorithmBody);
      codeVal.value = algorithmBody.content;
      languageSingle.value = {
        val: algorithmBody.typeMode,
        label: algorithmBody.type,
      };
    }
  } else {
    console.log("ccc");
    languageSingle.value = {};
  }
}
function submitCode(type, typeMode, content) {
  const params = {
    type: type,
    typeMode: typeMode,
    content: content,
  };
  editFuncInfo({ id: formData.value.id, algorithmBody: JSON.stringify(params) })
    .then((res) => {
      if (JSON.stringify(res) !== "") {
        message.success("保存成功");
        dealData(res);
      } else {
        message.error("保存失败");
      }
    })
    .catch((err) => {
      message.error("保存失败");
    });
}
onMounted(() => {
  console.log("基本信息");
  getData();
});
const dataOld = ref();
const getData = () => {
  getFuncInfo({ id: props.id }).then((res) => {
    formData.value.groupName = res.algorithmGroup.name;
    formData.value = { ...formData.value, ...res };
    dataOld.value = { ...formData.value, ...res };
    dealData(res);
  });
};
</script>
<style lang="less" scoped>
.json_box {
  padding: 20px 15px;
  border: 1px solid #e8e8e8;
  min-height: calc(100vh - 280px);
}
:deep(.jv-container .jv-code) {
  padding: 0 !important;
}
</style>

codeMirror组件

<template>
  <div class="in-coder-panel">
    <div class="select-box">
      选择语言：
      <a-select
        class="code-mode-select"
        @change="changeMode"
        v-model:value="language"
        :disabled="single || readOnly"
      >
        <a-select-option v-for="i in modes" :key="i.value" :value="i.value">
          {{ i.label }}
        </a-select-option>
      </a-select>
      <span class="run_btn" v-show="!readOnly">
        <!-- <a-icon type="play-circle" theme="filled" title="运行" /> -->
        <span class="saveBtn" @click="saveCode">保存</span>
      </span>
      <!-- <a-icon class="run_btn" type="play-circle" theme="filled" title="运行" v-if="!readOnly"/> -->
    </div>
    <textarea ref="textarea"></textarea>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
// 引入全局实例
import _CodeMirror from "codemirror";
// import { Codemirror } from "vue-codemirror";
//   // 核心样式
import "codemirror/lib/codemirror.css";
// 引入主题后还需要在 options 中指定主题才会生效
import "codemirror/theme/eclipse.css";
// import 'codemirror/addon/hint/show-hint.css'
// import 'codemirror/addon/hint/show-hint.js'
// 折叠
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/foldgutter";
import "codemirror/addon/fold/brace-fold";
import "codemirror/addon/fold/comment-fold";
// 需要引入具体的语法高亮库才会有对应的语法高亮效果
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/css/css.js";
import "codemirror/mode/xml/xml.js";
import "codemirror/mode/clike/clike.js";
import "codemirror/mode/markdown/markdown.js";
import "codemirror/mode/python/python.js";
import "codemirror/mode/r/r.js";
import "codemirror/mode/shell/shell.js";
import "codemirror/mode/sql/sql.js";
import "codemirror/mode/swift/swift.js";
import "codemirror/mode/vue/vue.js";
import { message } from "ant-design-vue";
const props = defineProps({
  value: {
    type: String,
    default: "",
  },
  languageSingle: {
    type: Object,
    default: () => {
      return {};
    }, // text/**//x-sql
  },
  readOnly: {
    type: Boolean,
    default: false,
  },
  single: {
    type: Boolean,
    default: false,
  },
});
// 尝试获取全局实例
const CodeMirror = ref(window.CodeMirror || _CodeMirror);
const code = ref();
const mode = ref("javascript");
const coder = ref(null);
const languageType = ref("");
const language = ref("");
const options = ref({
  // 缩进格式
  tabSize: 4,
  // 主题，对应主题库 JS 需要提前引入
  theme: "eclipse",
  // 显示行号
  lineNumbers: true,
  line: true,
  foldGutter: true,
  lineWrapping: true,
  gutters: [
    "CodeMirror-linenumbers",
    "CodeMirror-foldgutter",
    "CodeMirror-lint-markers",
  ],
  matchTags: { bothTags: true },
  extraKeys: { Ctrl: "autocomplete" },
});
const modes = ref([
  // {
  //   value: 'css',
  //   label: 'CSS'
  // }, {
  //   value: 'javascript',
  //   label: 'Javascript'
  // }, {
  //   value: 'html',
  //   label: 'XML/HTML'
  // }, {
  //   value: 'x-java',
  //   label: 'Java'
  // }, {
  //   value: 'x-csrc',
  //   label: 'C'
  // }, {
  //   value: 'x-c++src',
  //   label: 'C++'
  // },
  {
    value: "x-csharp",
    label: "C#",
  },
  {
    value: "x-sql",
    label: "SQL",
  },
  {
    value: "javascript",
    label: "Javascript",
  },
  //  {
  //   value: 'x-python',
  //   label: 'Python'
  // }, {
  //   value: 'x-rsrc',
  //   label: 'R'
  // }, {
  //   value: 'x-sh',
  //   label: 'Shell'
  // }, {
  //   value: 'x-sql',
  //   label: 'SQL'
  // }, {
  //   value: 'x-swift',
  //   label: 'Swift'
  // }, {
  //   value: 'x-vue',
  //   label: 'Vue'
  // }, {
  //   value: 'markdown',
  //   label: 'Markdown'
  // }
]);
onMounted(() => {
  _initialize();
  //
});
defineExpose({
  _initialize,
  CodeMirror,
  coder,
  language,
});
const textarea = ref();
// 初始化
function _initialize() {
  CodeMirror.value = window.CodeMirror || _CodeMirror;
  // 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
  coder.value = CodeMirror.value.fromTextArea(textarea.value, options.value);
  // 编辑器赋值
  if (props.value || code.value) {
    coder.value.setValue(props.value || code.value);
  } else {
    coder.value.setValue("");
  }
  code.value = props.value;
  // 支持双向绑定
  coder.value.on("change", (coder) => {
    code.value = coder.getValue();
    // if (this.$emit) {
    //   this.$emit('input', this.code)
    // }
  });
  // 尝试从父容器获取语法类型
  if (JSON.stringify(props.languageSingle) !== "{}") {
    if (props.languageSingle.val) {
      language.value = props.languageSingle.val;
    }
    //  language.value = props.languageSingle.val? props.languageSingle.val:''
    languageType.value = props.languageSingle.label;
    coder.value.setOption("mode", `text/` + language.value);
  }
  coder.value.setOption("readOnly", props.readOnly);
}
// 获取当前语法类型
function _getLanguage(language) {
  // 在支持的语法类型列表中寻找传入的语法类型
  return modes.value.find((mode) => {
    // 所有的值都忽略大小写，方便比较
    const currentLanguage = language.toLowerCase();
    const currentLabel = mode.label.toLowerCase();
    const currentValue = mode.value.toLowerCase();

    // 由于真实值可能不规范，例如 java 的真实值是 x-java ，所以讲 value 和 label 同时和传入语法进行比较
    return currentLabel === currentLanguage || currentValue === currentLanguage;
  });
}
const emits = defineEmits(["submitCode", "language-change"]);
// 更改模式
function changeMode(val) {
  language.value = val;
  // 修改编辑器的语法配置
  coder.value.setOption("mode", `text/${val}`);
  // 获取修改后的语法
  const label = _getLanguage(val).label.toLowerCase();
  // 允许父容器通过以下函数监听当前的语法值
  // emits('language-change',label)
  languageType.value = label;
}
function saveCode() {
  if (!languageType.value) {
    message.warning("请选择语言！");
    return;
  }
  if (!code.value) {
    message.warning("请输入函数！");
    return;
  }
  emits("submitCode", languageType.value, language.value, code.value);
}
watch(
  () => props.readOnly,
  (val, oldVal) => {
    coder.value.setOption("readOnly", val);
  }
  // { deep: true, immediate: true }
);
watch(
  () => props.value,
  (newVal, oldVal) => {
    console.log("fff");
    if (newVal) {
      console.log("nrr", newVal);
      props.value = newVal;
      CodeMirror.value = null;
      if (props.value || code.value) {
        coder.value.setValue(props.value || code.value);
      }
      code.value = props.value;
      if (JSON.stringify(props.languageSingle) !== "{}") {
        if (props.languageSingle.val) {
          language.value = props.languageSingle.val;
        }
        //  language.value = props.languageSingle.val? props.languageSingle.val:''
        languageType.value = props.languageSingle.label;
        coder.value.setOption("mode", `text/` + language.value);
      }
      // _initialize ()
    } else {
      console.log("实现");
      //    if(CodeMirror.value){
      //              coder.value.setValue('')
      //    CodeMirror.value=null
      //    coder.value=null
      // code.value=''
      // languageType.value=''
      //    }
    }
  },
  { deep: true, immediate: true }
);
</script>
<style lang="less" scoped>
.in-coder-panel {
  position: relative;
  height: 660px;
  :deep(.CodeMirror) {
    flex-grow: 1;
    z-index: 1;
    height: calc(100% - 52px);
    border-top: 1px solid #dddddd;
    .CodeMirror-code {
      line-height: 19px;
    }
  }
  .CodeMirror-sizer {
    padding-top: 10px;
  }
  .select-box {
    padding-left: 15px;
    .code-mode-select {
      width: 200px;
      margin: 10px 0 10px;
    }
  }
  .run_btn {
    float: right;
    margin: 15px 20px 0;
    font-size: 24px;
    cursor: pointer;
    i {
      margin-left: 10px;
      &:hover {
        color: #357ad4;
      }
    }
  }
  .saveBtn {
    font-size: 16px;
    padding: 3px 20px;
    border-radius: 2px;
    background-color: #2d77e8;
    color: #fff;
    position: absolute;
    right: 20px;
    top: 18px;
  }
}
.in-coder-panel {
  :deep(.CodeMirror):nth-child(1) {
    display: none !important;
  }
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/728865.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

文华财经期货APP随身行和同花顺期货可以模拟交易的期货软件，那个更好用？

文华财经期货APP随身行和同花顺期货可以模拟交易的期货软件，那个更好用？

期货app是一种可以在手机上进行期货交易和行情分析的软件&#xff0c;它可以让投资者随时随地掌握期货市场的动态&#xff0c;进行投资决策。随着科技的发展&#xff0c;越来越多的期货投资者选择通过手机端app来进行期货交易&#xff0c;享受随时随地、方便快捷的服务。市面上…
阅读更多...
Js获取浏览器地址栏参数

Js获取浏览器地址栏参数

获取浏览器地址参数 //获取浏览器地址栏参数function getQueryString(name) {var reg new RegExp("(^|&)" name "([^&]*)(&|$)");var result window.location.search.substr(1).match(reg);if (result ! null) {return unescape(result[2…
阅读更多...
VMware 17虚拟Ubuntu 22.04设置共享目录

VMware 17虚拟Ubuntu 22.04设置共享目录

之前使用VM 17之前的版本虚拟CentOS&#xff0c;设置共享目录非常方便&#xff0c;在CentOS中安装VMware Tools即可。随着CentOS变成上游版本后&#xff0c;转向使用Ubuntu&#xff0c;VM也升级到了17&#xff0c;Ubuntu也升级到了最新的22.04&#xff0c;但是发现共享目录不能…
阅读更多...
阿里大牛新产Java面试速成指南，主打就是躺着拿Ofeer

阿里大牛新产Java面试速成指南，主打就是躺着拿Ofeer

很多粉丝后台留言&#xff0c;Java程序员面临的竞争太激烈了…… 我自己也有实感&#xff0c;多年身处一线互联网公司&#xff0c;虽没有直面过求职跳槽的残酷&#xff0c;但经常担任技术面试考官&#xff0c;对程序员招聘市场的现状很清楚。导致现在激烈竞争的原因不外乎三方面…
阅读更多...
sqlite-manage数据库可视化管理uniqpp

sqlite-manage数据库可视化管理uniqpp

一、sqlite-manage介绍 sqlite-manage 是 SQLite 数据库可视化管理插件&#xff0c;更方前期查看和操作SQLite数据库&#xff0c;给APP开发者提供方便&#xff0c;避免重复造轮子。 内置增删改查工具类&#xff0c;可按需全局引用或单独引用。 二、使用sqlite要打开模块选项 三…
阅读更多...
java 计算网段范围 分析网段包含关系

java 计算网段范围 分析网段包含关系

目录 一、网段范围 二、思路说明 三、代码 1、将一个ip转为数字 2、转换子网掩码&#xff08;255.255.255.0 转为 24&#xff09; 3、根据 ip 与 掩码 计算最大值和最小值 4、测试 5、完整代码 四、难点讲解 1、转换子网掩码&#xff0c; 例&#xff1a;255.255.25…
阅读更多...
【习题之Python篇】习题24——回文

【习题之Python篇】习题24——回文

问题描述 2020年春节期间&#xff0c;有一个特殊的日期引起了大家的注意&#xff1a;2020年2月2日。因为如果将这个日期按 yyyymmdd 的格式写成一个8位数是 &#xff0c;恰好是一个回文数。我们称这样的日期是回文日期。 有人表示 是“千年一遇”的特殊日子。对此小明很不认同…
阅读更多...
JavaWeb 速通CSS

JavaWeb 速通CSS

目录 一、CSS入门 1.基本介绍 : 2.CSS的作用 : 3.CSS的语法 : 二、CSS样式 1.字体颜色&#xff1a; 1 说明 2 演示 2.边框 : 1 说明 2 演示 3.背景颜色 : 1 说明 2 演示 4.字体样式 : 1 说明 2 演示 5.div块居中 : 1 说明 2 演示 6.div文本居中 : 1 说明 2 演示 7.超…
阅读更多...
【软件测试】Git详细-获取Git仓库，全网最全一篇打通...

【软件测试】Git详细-获取Git仓库，全网最全一篇打通...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 官方提供了两种获…
阅读更多...
GCC is no longer supported解决方法Android Studio

GCC is no longer supported解决方法Android Studio

先说解决办法&#xff1a; 找到 -DANDROID_TOOLCHAINgcc进行删除。 原因是NDK版本过高了&#xff0c;r13b开始&#xff0c;llvm / Clang成为默认工具链&#xff0c;r18b开始删除了gcc。 删掉-DANDROID_TOOLCHAINgcc后&#xff0c;构建系统会默认使用clang。
阅读更多...
最大流?费用流？结合二分图？例题

最大流?费用流？结合二分图？例题

最大流 给出起点&#xff0c;终点&#xff0c;与边&#xff0c;边有最大流量限制&#xff0c;问从起点在不超过边的流量限制的情况下最大能从起点流多少流量到终点 反悔思想&#xff1a;如果我们每次找到一条路径就把这条路径上流量最小的边删去直到没有路径连接起点和终点&am…
阅读更多...
飞行动力学 - 第5节-part3-爬升性能随高度的变化趋势 之 基础点摘要

飞行动力学 - 第5节-part3-爬升性能随高度的变化趋势 之 基础点摘要

飞行动力学 - 第5节-part3-爬升性能随高度的变化趋势 之 基础点摘要 1. 动力学方程2. 爬升角、爬升率趋势3. 参考资料 1. 动力学方程 回顾下&#xff0c;根据牛顿第一运动定律给出的动力学方程&#xff1a; 2. 爬升角、爬升率趋势 从推导公式的角度&#xff0c;上述趋势需要考…
阅读更多...
按下数实融合的加速键，新华三推动基础设施变革

按下数实融合的加速键，新华三推动基础设施变革

去年底&#xff0c;生成式AI&#xff08;AIGC&#xff09;开始席卷全球&#xff0c;吸引社会各界的广泛关注。 正所谓AI黄金时代的到来&#xff0c;将重新定义各行各业。AIGC热浪来袭&#xff0c;标志着在数实融合的大趋势下&#xff0c;人工智能大范围应用的奇点已经来临&…
阅读更多...
Excel转图片（Java方式）

Excel转图片（Java方式）

先看效果、先看效果、先看效果 左侧&#xff1a;Excel的截图 右侧&#xff1a;生成的图片 开发工具&#xff1a; Eclipse 开发环境&#xff1a; JDK1.8 使用技术&#xff1a; Graphics2D&#xff1a;&#xff08;JDK自带&…
阅读更多...
使用python调用ChatGPT API 简单示例

使用python调用ChatGPT API 简单示例

如果你已经获得了OpenAI的API密钥&#xff0c;并且想要使用Python发起ChatGPT对话&#xff0c;你可以使用OpenAI的Python SDK来实现。下面是一个简单的示例代码&#xff1a; 首先&#xff0c;你需要确保已安装OpenAI的Python SDK。你可以使用pip来安装&#xff1a; pip insta…
阅读更多...
模板（上）

模板（上）

文章目录 泛型编程函数模板类模板 一、泛型编程 泛型编程&#xff1a;编写与类型无关的通用代码&#xff0c;是代码复用的一种手段。模板是泛型编程的基础。 void Swap(int& left, int& right) {int temp left;left right;right temp; } void Swap(double& …
阅读更多...
什么是混合云？

什么是混合云？

混合云&#xff08;Hybrid Cloud&#xff09;是指结合了私有云和公有云的计算环境。私有云是指在企业内部建立的基础设施&#xff0c;由企业自己管理和控制&#xff1b;而公有云是由第三方云服务提供商&#xff08;如亚马逊AWS、微软Azure、谷歌云等&#xff09;提供的计算资源…
阅读更多...
浅谈无效化一个空窗口的后果

浅谈无效化一个空窗口的后果

有时候&#xff0c;你可能会注意到这样一个现象&#xff1a;桌面上的所有窗口都刷新了自身并产生了闪烁。 导致这个现象的原因之一是一个所谓的空句柄窗口 Bug。 如果你研究过 Win32 SDK 编程&#xff0c;则你应该比较熟悉这个函数&#xff1a;InvalidateRect。 调用这个函数可…
阅读更多...
C# PaddleInference 图片旋转角度检测

C# PaddleInference 图片旋转角度检测

效果 项目 VS2022.net4.8 OpenCvSharp4Sdcb.PaddleInference 代码 using OpenCvSharp; using Sdcb.PaddleInference; using Sdcb.PaddleInference.Native; using System; using System.Drawing; using System.Globalization; using System.Linq; using System.Runtime.Interop…
阅读更多...
14天学会：基于J2EE的JAVA WEB基础

14天学会：基于J2EE的JAVA WEB基础

系列文章 手把手教你&#xff1a;基于Django的新闻文本分类可视化系统&#xff08;文本分类由bert实现&#xff09; 手把手教你&#xff1a;基于python的文本分类&#xff08;sklearn-决策树和随机森林实现&#xff09; 手把手教你&#xff1a;岩石样本智能识别系统 一、学习…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023