【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时,则只允许可读不能修改

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

神经网络 03(参数初始化)

一、参数初始化 对于某一个神经元来说&#xff0c;需要初始化的参数有两类&#xff1a;一类是权重W&#xff0c;还有一类是偏置b&#xff0c;偏置b初始化为0即可。而权重W的初始化比较重要&#xff0c;我们着重来介绍常见的初始化方式。 &#xff08;1&#xff09;随机初始化 …

Prometheus、node_exporter、Grafana端口修改(端口占用)

服务器监控搭建完成后涉及默认端口修改&#xff0c;如下 node_exporter 端口修改 #修改启动服务 vi /usr/lib/systemd/system/node-exporter.service #增加 --web.listen-address:8002 [Unit] ​ DescriptionThis is prometheus node exporter ​ Afternode_exporter.service…

《PostgreSQL与NoSQL:合作与竞争的关系》

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f405;&#x1f43e;猫头虎建议程序员必备技术栈一览表&#x1f4d6;&#xff1a; &#x1f6e0;️ 全栈技术 Full Stack: &#x1f4da…

山西电力市场日前价格预测【2023-09-21】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-09-21&#xff09;山西电力市场全天平均日前电价为345.38元/MWh。其中&#xff0c;最高日前电价为408.38元/MWh&#xff0c;预计出现在19: 00。最低日前电价为246.41元/MWh&#xff0c;预计…

ew三层代理使用方法

1.获得目标网络内两台主机 A、B 的权限&#xff0c;情况描述如下&#xff1a; A 主机&#xff1a; 目标网络的边界主机&#xff0c;无公网 IP&#xff0c;无法访问特定资源。 B 主机&#xff1a; 目标网络内部主机&#xff0c;可访问特定资源&#xff0c;却无…

查看docker镜像是由哪些指令创建来的

–no-trunc 是不要省略。 docker history --no-trunc kevinchina/deeplearning:sd_base_cuda116clip7 > history.txtcp -aL ~/.cache/huggingface/hub/models–Salesforce–blip-image-captioning-large/snapshots/e33defe055114d86bec9c0705b71e590cfc0694c/* ~/.cache/hu…

k8s手动下载镜像、通过容器创建镜像方法

手动下载镜像 1、首先pull镜像到本地 docker pull <镜像名称>:<标签>2、转储镜像 docker save -o /path/to/save/image.tar 3、解压 tar -xvf /path/to/save/image.tar补充 1、如果要将tar还原成镜像 docker load -i /path/to/save/image.tar或者用输入重定向…

lazada跨境电商商品数据采集

Lazada跨境电商商品数据采集可以使用以下两种方法&#xff1a; 手动采集&#xff1a;可以在Lazada网站上手动搜索商品信息&#xff0c;然后复制粘贴到Excel表格中。这种方法比较麻烦&#xff0c;需要逐个搜索和记录商品信息&#xff0c;适合采集数量较少的商品数据。使用采集软…

python异常处理 try,except,finally

1、基本语法 在python中&#xff0c;一般处理和捕获异常会用到这个结构&#xff1a; try:python程序 except 错误类型1:python程序 except 错误类型2:python程序 except 其他错误类型:python程序 finally:python程序首先一定会进入try中执行try的python程序如果报错 则进入exc…

技术对比:Flutter vs. 传统桌面应用开发框架

在移动应用开发领域&#xff0c;Flutter已经赢得了广泛的认可和采用&#xff0c;成为了跨平台移动应用开发的瑞士军刀。然而&#xff0c;Flutter的魅力并不仅限于移动平台&#xff0c;它还可以用于开发桌面应用程序&#xff0c;为开发人员提供了一种全新的选择。本文将深入探讨…

Elasticsearch(四)深分页Scroll

一、前言 1.1、scroll与fromsize区别 ES对于fromsize的个数是有限制的&#xff0c;二者之和不能超过1w。当所请求的数据总量大于1w时&#xff0c;可用scroll来代替fromsize。 fromsize在ES查询数据的方式步骤如下&#xff1a; 1、先将用户指定的关键字进行分词&#xff1b;…

springboot+jxls复杂excel模板导出

JXLS 是基于 Jakarta POI API 的 Excel 报表生成工具&#xff0c;可以生成精美的 Excel 格式报表。它采用标签的方式&#xff0c;类似 JSP 标签&#xff0c;写一个 Excel 模板&#xff0c;然后生成报表&#xff0c;非常灵活&#xff0c;简单&#xff01; Java 有一些用于创建 …

javascript获取样式表的规则及读取与写入

CSSStyleSheet是继承了StyleSheet的接口属性,它是用于找当前文档中的<link rel“” href“”…>这样文件的&#xff0c;有以下属性&#xff1a;lenght,cssRules,title,href,type,deleteRule,insertRule等 CSSStyleRule是继承于CSSRule&#xff0c;它是用于找<link re…

5G定位技术原理与应用场景

5G高精度定位服务不仅适用于应急&#xff0c;还可以支持大量的个人业务&#xff0c;包括室外和室内场景&#xff0c;可以在交通道路、隧道、地下停车场或室内环境中支持高精度定位服务。在这些区域中&#xff0c;由于卫星信号的覆盖范围较小&#xff0c;基于5G网络的高精度定位…

[NLP] LLM---<训练中文LLama2(一)>训练一个中文LLama2的步骤

一 数据集 【Awesome-Chinese-LLM中文数据集】 【awesome-instruction-dataset】【awesome-instruction-datasets】【LLaMA-Efficient-Tuning-数据集】Wiki中文百科&#xff08;25w词条&#xff09;wikipedia-cn-20230720-filteredBaiduBaiKe&#xff08;563w词条&#xff09; …

权限提升Web篇

权限总类 Linux 管理员UID为0:超级用户&#xff0c;即root用户&#xff0c;相当于system和administrator的集合 系统用户UID为1-999: Linux系统为了避免因某个服务程序漏洞而被黑客提权的普通用户&#xff0c;拥有部分权限 UID从1000开始: 是由管理员创建的用于日常工作的用…

java-- 字符串+拼接详解, 性能调优 (底层原理实现)

目录 简单了解一下字符串 String类里面是如何存放字符串的? String的不可变性 字符串拼接的方法 1.使用拼接字符串 2. 使用concat 3. 使用StringBuilder 4.StringBuffer 使用字符串拼接的原理 使用concat StringBuilder 效率比较 简单了解一下字符串 字符串在java…

Killing LeetCode [46] 全排列

Description 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 Intro Ref Link&#xff1a;https://leetcode.cn/problems/permutations/ Difficulty&#xff1a;Medium Tag&#xff1a;Array&#xff0c;Back Trackin…

win10 win11 停止系统自动更新方法

目录 方法一&#xff1a;使用注册表更改 1. 进入注册表 2. 进入如下目录 3. 新建 DWOED(32-位)值 4. 双击 FlightSettingsMaxPauseDays&#xff0c;选择十进制&#xff0c;左侧输入9999 5. 开头的天数已经变为9999天 方法二&#xff1a;停止自动更新的服务 1. 查询服务…

arxiv上传latex文章的坑

1. 下载latex源码&#xff0c;overleaf-->提交-->arXiv-->下载latex源码 2. arxiv只支持上传小于50M的文件&#xff0c;大于50M将会出现失败 3. latex 编译错误及解决之Package natbib Error: Bibliography not compatible with author-year citations. 解决方案&a…