当前位置: 首页 > news >正文

【vue3页面展示代码】展示代码codemirror插件

技术版本
vue 3.2.40、codemirror 6.0.1、less 4.1.3、vue-codemirror 6.1.1、
@codemirror/lang-vue 0.1.2、@codemirror/theme-one-dark 6.1.2

效果图

在这里插入图片描述

1.安装插件

yarn add codemirror vue-codemirror @codemirror/lang-vue @codemirror/theme-one-dark

2.新建子组件CodeMirror(src/view-components/CodeMirror/index.vue)

<script setup lang="ts">import type { CSSProperties } from 'vue';import { ref } from 'vue';import { Codemirror } from 'vue-codemirror';import { vue } from '@codemirror/lang-vue';import { oneDark } from '@codemirror/theme-one-dark';interface Props {codeStyle?: CSSProperties; // 代码样式dark?: boolean; // 是否暗黑主题code?: string; // 代码字符串// placeholder?: string // 占位文本// autofocus?: boolean // 自动聚焦// disabled?: boolean // 禁用输入行为和更改状态// indentWithTab?: boolean // 启用tab按键// tabSize?: number // tab按键缩进空格数}const props = withDefaults(defineProps<Props>(), {// placeholder: 'Code goes here...',codeStyle: () => {return {};},dark: false,code: '',// autofocus: false,// disabled: false,// indentWithTab: true,// tabSize: 2});const extensions = props.dark ? [vue(), oneDark] : [vue()];const codeValue = ref(props.code);const emits = defineEmits(['update:code','ready','change','focus','blur',]);function handleReady(payload: any) {// console.log('ready')emits('ready', payload);}function onChange(value: string, viewUpdate: any) {emits('change', value, viewUpdate);emits('update:code', value);}function onFocus(viewUpdate: any) {emits('focus', viewUpdate);}function onBlur(viewUpdate: any) {emits('blur', viewUpdate);}
</script><template><div><Codemirrorv-model="codeValue":style="codeStyle":extensions="extensions"v-bind="$attrs"@ready="handleReady"@change="onChange"@focus="onFocus"@blur="onBlur"/></div>
</template><style lang="less" scoped>/deep/ .cm-editor {border-radius: 8px;outline: none;border: 1px solid transparent;.cm-scroller {border-radius: 8px;}}/deep/ .cm-focused {border: 1px solid fade(#000, 48%);}
</style>

3.父组件调用CodeMirror组件

<template><div class="addHttpMqttServicePage"><CodeMirrorv-model:code="form.script"dark:codeStyle="{ width: '1000px', height: '190px', fontSize: '16px' }":disabled="false"@ready="onReady"@change="onChange"@focus="onFocus"@blur="onBlur"/></div></template><script setup lang="ts">import { ref, defineProps } from 'vue';import CodeMirror from '@/view-components/CodeMirror/index.vue';const form = ref({script: '',});const onReady = (payload: any) => {console.log('ready:', payload);};const onChange = (value: string, viewUpdate: any) => {console.log('change:', value);console.log('change:', viewUpdate);};const onFocus = (viewUpdate: any) => {console.log('focus:', viewUpdate);};const onBlur = (viewUpdate: any) => {console.log('blur:', viewUpdate);};</script><style scoped lang="less">.addHttpMqttServicePage {width: 100%;height: 100%;padding: 20px;&-header {font-size: 18px;font-weight: bold;}&-body {padding-top: 24px;width: 50%;display: flex;flex-direction: column;justify-content: flex-start;}}</style>

4.注意点

1.官方文档:https://codemirror.net/
2.disabled为true时,则只允许可读不能修改

相关文章:

【vue3页面展示代码】展示代码codemirror插件

技术版本&#xff1a; vue 3.2.40、codemirror 6.0.1、less 4.1.3、vue-codemirror 6.1.1、 codemirror/lang-vue 0.1.2、codemirror/theme-one-dark 6.1.2 效果图&#xff1a; 1.安装插件 yarn add codemirror vue-codemirror codemirror/lang-vue codemirror/theme-one-dar…...

【面试必刷TOP101】链表相加 单链表的排序

目录 题目&#xff1a;链表相加(二)_牛客题霸_牛客网 (nowcoder.com) 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 题目&#xff1a;单链表的排序_牛客题霸_牛客网 (nowcoder.com) 题目的接口&#xff1a;…...

Visual Studio复制、拷贝C++项目与第三方库配置信息到新的项目中

本文介绍在Visual Studio软件中&#xff0c;复制一个已有的、配置过多种第三方库的C项目&#xff0c;将其拷贝为一个新的项目&#xff0c;同时使得新项目可以直接使用原有项目中配置好的各类**C**配置、第三方库等的方法。 在撰写C 代码时&#xff0c;如果需要用到他人撰写的第…...

rust迭代器

迭代器用来遍历容器。 迭代器就是把容器中的所有元素按照顺序一个接一个的传递给处理逻辑。 Rust中的迭代器 标准库中定义了Iterator特性 trait Iterator {type Item;fn next(&mut self) -> Option<Self::Item>; }实现了Iterator特性的结构体就是迭代器。 很多类…...

软件定制开发的优势与步骤|APP搭建|小程序

软件定制开发的优势与步骤|APP搭建|小程序 定制开发的优势&#xff1a; 1. 满足特定需求&#xff1a;定制开发可以根据客户的实际需求进行设计和开发&#xff0c;使得软件系统能够更好地满足客户的业务目标。 2. 优化用户体验&#xff1a;通过深入了解客户的需求&#xff0c;定…...

ERR_CONNECTION_REFUSED等非标准的HTTP错误状态码原因分析和解决办法

文章目录 一、DNS Resolution Failed1&#xff0c;DNS服务器故障2&#xff0c;DNS配置错误3&#xff0c;DNS劫持4&#xff0c;域名过期-5&#xff0c;其他网络问题 二、ERR_CONNECTION_REFUSED-"ERR_CONNECTION_REFUSED" 错误可能有多种原因 三、ERR_SSL_PROTOCOL_ER…...

瀑布流 - Vue3基于Grid布局简单实现一个瀑布流组件

瀑布流 - Vue3基于Grid布局简单实现一个瀑布流组件 前言 在学习Grid布局之时&#xff0c;我发现其是CSS中的一种强大的布局方案&#xff0c;它将网页划分成一个个网格&#xff0c;可以任意组合不同的网格&#xff0c;做出各种各样的布局&#xff0c;在刷某书和某宝首页时&…...

ES6面试题总结

1. 谈谈你对 ES6 的理解,为什么要学习es6? ES6是新一代的JS语言标准&#xff0c;对分JS语言核心内容做了升级优化&#xff0c;规范了JS使用标准&#xff0c;新增了JS原生方法&#xff0c;使得JS使用更加规范&#xff0c;更加优雅&#xff0c;更适合大型应用的开发。学习ES6是成…...

mybatisplus,jdbc 批量插入

1.测试用例 项目中遇到在做导入号码的时候我们会用到批量导入&#xff0c;提高入库的速度。接下来我们以10000条为测试用例。 1.1 批量执行sql语句 当需要成批插入或者更新记录时&#xff0c;可以采用Java的批量更新机制&#xff0c;这一机制允许多条语句一次性提交给数据库…...

如何使用IP归属地查询API来追踪网络活动

引言 在当今数字化世界中&#xff0c;了解网络活动的源头和位置对于网络安全、市场研究和用户体验至关重要。IP归属地查询API是一种强大的工具&#xff0c;可以帮助您追踪网络活动并获取有关IP地址的重要信息。本文将探讨如何使用IP归属地查询API来追踪网络活动&#xff0c;以…...

【SQL】S0 系列博文大纲

系列博文大纲 SQL 学习环境建议系列博文相关书籍系列博文大纲阶段进展 SQL 学习环境建议 对于 SQL 语言的学习&#xff0c;博主本地使用&#xff1a;MySQL DataGrip&#xff1b; MySQL 提供本地数据库服务&#xff1b; DataGrip IDE&#xff0c;承担编程运行测试任务&#xf…...

2023年8月体育用品行业数据分析(京东数据产品)

当前&#xff0c;亚运会临近&#xff0c;这也带动了国民对体育消费的热情&#xff0c;体育产品内销逐渐旺盛&#xff0c;“亚运经济”红利开始显现。鲸参谋数据显示&#xff0c;今年8月份&#xff0c;京东平台上体育用品行业的销量为185万&#xff0c;同比增长2%&#xff1b;销…...

国内高校镜像网站

国内各大高校开源镜像站 排名不分前后 清华大学&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/ 北京大学&#xff1a;https://mirrors.pku.edu.cn/ 北京外国语大学&#xff1a;http://​ https://mirrors.bfsu.edu.cn/ ​ 北京理工大学&#xff1a;https://mirrors.bit.e…...

Linux安装kafka-manager

相关链接https://github.com/yahoo/kafka-manager/releases kafka-manager-2.0.0.2下载地址 百度云链接&#xff1a;https://pan.baidu.com/s/1XinGcwpXU9YBF46qkrKS_A 提取码&#xff1a;tzvg 一、安装部署 1.把kafka-manager-2.0.0.2.zip拷贝到目录 /opt/app/elk 2.解压…...

MYSQL索引——B+树讲解

B-/B树看 MySQL索引结构 B-树 B-树,这里的 B 表示 balance( 平衡的意思),B-树是一种多路自平衡的搜索树.它类似普通的平衡二叉树&#xff0c;不同的一点是B-树允许每个节点有更多的子节点。下图是 B-树的简化图. B-树有如下特点: 所有键值分布在整颗树中&#xff1b; 任何一…...

VB将十进制整数转换成16进制以内的任意进制数

VB将十进制整数转换成16进制以内的任意进制数 数值转换&#xff0c;能够将十进制整数转换成16进制以内的任意进制数 Private Function DecToN(ByVal x%, ByVal n%) As StringDim p() As String, y$, r%p Split("0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F", ",")I…...

基于SpringBoot+Vue的宠物领养饲养交流管理平台设计与实现

前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb;…...

【图像去噪】【TGV 正则器的快速计算方法】通过FFT的总(广义)变化进行图像去噪(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

windbg调试句柄问题

这里写自定义目录标题 winform&#xff0c;句柄资源不够强&#xff0c;程序crash句柄主程序c程序&#xff0c;加载的插件是c# dll&#xff0c;这时候如何用windbg调试dll库如果查看句柄和对象的关系!handle 怎么能知道哪个句柄是Form对话框的句柄如何查看句柄对应的类对象 winf…...

9月13-14日上课内容 第三章 ELK日志分析系统及部署实例

本章结构 ELK日志分析系统简介 ELK日志分析系统分为 Elasticsearch Logstash Kibana 日志处理步骤 1.将日志进行集中化管理 2.将日志格式化(Logstash) 并输出到Elasticsearch 3.对格式化后的数据进行索引和存储 (Elasticsearch) 4.前端数据的展示(Kibana) Elasticsearch介…...

Simulink低通滤波器实战:从随机信号生成到参数调优(附完整模型)

Simulink低通滤波器实战&#xff1a;从随机信号生成到参数调优&#xff08;附完整模型&#xff09; 在嵌入式系统和自动化工程领域&#xff0c;信号处理的质量往往直接决定整个系统的稳定性。想象一下&#xff0c;当你从传感器获取的实时数据充满噪声和毛刺时&#xff0c;如何确…...

PyFluent:3大核心场景实现CFD仿真全流程自动化

PyFluent&#xff1a;3大核心场景实现CFD仿真全流程自动化 【免费下载链接】pyfluent 项目地址: https://gitcode.com/gh_mirrors/pyf/pyfluent 计算流体动力学&#xff08;CFD&#xff09;仿真作为工程设计的关键环节&#xff0c;长期面临流程繁琐、迭代低效、跨学科协…...

南北阁4.1-3B WebUI代码实例:TextIteratorStreamer多线程流式实现解析

南北阁4.1-3B WebUI代码实例&#xff1a;TextIteratorStreamer多线程流式实现解析 今天咱们来聊聊一个特别有意思的项目——一个为南北阁4.1-3B模型量身定做的Web交互界面。如果你用过Streamlit&#xff0c;可能会觉得它的界面有点“官方”&#xff0c;布局也比较固定。但这个…...

第三次作业:django做动态(个人主页)

...

2分钟搞定:Windows包管理器Winget一键安装全攻略

2分钟搞定&#xff1a;Windows包管理器Winget一键安装全攻略 【免费下载链接】winget-install Install winget tool using PowerShell! Prerequisites automatically installed. Works on Windows 10/11 and Server 2022. 项目地址: https://gitcode.com/gh_mirrors/wi/winge…...

vLLM生产-解码分离架构:从概念到部署的吞吐优化实践

1. 为什么需要生产-解码分离架构 第一次部署大模型在线服务时&#xff0c;我盯着监控面板上的GPU利用率曲线直挠头——为什么计算单元总是间歇性满载又突然空闲&#xff1f;后来发现这是典型的Prefill-Decode耦合架构的弊端。就像餐厅里同一个厨师既要负责备菜&#xff08;切配…...

工业视觉代码交付总被退回?(甲方验收必查的6项硬性指标:实时性≤35ms、重复精度±0.015px、抗电磁干扰日志完备性)

第一章&#xff1a;工业视觉代码交付失败的典型归因分析工业视觉系统在产线部署阶段频繁遭遇代码交付失败&#xff0c;其根本原因往往并非算法性能不足&#xff0c;而是工程化落地环节存在系统性疏漏。以下从环境适配、数据闭环、接口契约三个维度展开典型归因。运行时环境不一…...

避坑指南:Xdocreport模板制作中的5个常见错误及解决方案

Xdocreport实战避坑指南&#xff1a;模板制作中的5个高频错误与深度解决方案 在Java生态中处理动态Word文档生成时&#xff0c;Xdocreport凭借其与MS Office的无缝兼容性和模板灵活性&#xff0c;已成为企业级文档自动化的重要工具。但许多开发者在从Freemarker迁移到Xdocrepor…...

别再花钱买云API了!手把手教你用Docker+Ollama在本地免费跑通Strix渗透测试

零成本打造企业级渗透测试环境&#xff1a;DockerOllama本地化实战指南 当安全团队每月收到云服务商五位数的API账单时&#xff0c;当关键测试任务因网络抖动被迫中断时&#xff0c;越来越多的技术决策者开始重新审视渗透测试的基础架构。本文将揭示如何用消费级硬件构建媲美商…...

Win11Debloat:一键清理Windows 11,让你的电脑重回清爽状态

Win11Debloat&#xff1a;一键清理Windows 11&#xff0c;让你的电脑重回清爽状态 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本&#xff0c;用于从Windows中移除预装的无用软件&#xff0c;禁用遥测&#xff0c;从Windows搜索中移除Bing&#xff0c;以及执行各种其…...