vue-codemirror的简单使用

功能

代码编辑器

安装

命令行:npm install codemirror vue-codemirror --save

单文件引入

import { Codemirror } from 'vue-codemirror'

单文件展示

 <codemirror
    v-model="localCode"
    class="code-mirror"
    :placeholder="placeholder"
    :autofocus="true"
    :indent-with-tab="true"
    :tab-size="2"
    :extensions="extensions"
    :disabled="disabled"
    :style="customStyle"
    @ready="handleReady"
    @change="onChange"
    @focus="onFocus"
    @blur="onBlur"
  />

这里的单文件封装成一个组件,以供父组件调用

属性解读

  • v-model="localCode": 双向绑定数据

  • :placeholder="placeholder" 占位提示语

  • :autofocus="true" 自动聚焦

  • :indent-with-tab="true"

  • :extensions="extensions" 扩展

扩展安装

 pnpm install @codemirror/lang-json // json扩展
 pnpm install @codemirror/theme-one-dark  // theme-one-dark扩展

单文件导入扩展

import { json } from '@codemirror/lang-json'
import { oneDark } from '@codemirror/theme-one-dark'
const extensions = [json(), oneDark]  // 加载模块

显示

监听父组件传过来的值,通过vue3双向绑定原理更新到dom展示

const localCode = ref(props.code) // 获取父组件传过来的值,初始化数据

监听父组件数据变化,更新子组件数据

watch(
  () => props.code,
  (newVal) => {
    localCode.value = newVal
  }
)

编辑器更改

onChange获取数据变化,vue3 => emit传递给父组件

const onChange = (value: string, viewUpdate: any) => {
  console.log('change', value)
  emit('update:code', value)
}

是否可编辑

可以设置disabled状态,设为是否可读,

:disabled="disabled"

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

笔记-python reduce 函数

reduce() 函数在 python 2 是内置函数&#xff0c; 从python 3 开始移到了 functools 模块。 官方文档是这样介绍的 reduce(...) reduce(function, sequence[, initial]) -> valueApply a function of two arguments cumulatively to the items of a sequence, from left …

健身房管理系统

摘 要 随着人们健康意识的增强&#xff0c;健身房作为一种提供健身服务的场所&#xff0c;受到越来越多人的关注和喜爱。然而&#xff0c;传统的健身房管理方式存在诸多问题&#xff0c;如信息管理不便捷、会员管理不规范等。为了解决这些问题&#xff0c;本文设计并实现了一款…

分享一套基于SSM的九宫格日志网站(源码+文档+部署)

大家好&#xff0c;今天给大家分享一套基于SSM的九宫格日志网站 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringSpringMvcMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 博主介绍&#xff1a; 一名Java全栈工程师&#xff0c;专注于Java全…

AI大模型日报#0626:首款大模型芯片挑战英伟达、面壁智能李大海专访、大模型测试题爆火LeCun点赞

导读&#xff1a;AI大模型日报&#xff0c;爬虫LLM自动生成&#xff0c;一文览尽每日AI大模型要点资讯&#xff01;目前采用“文心一言”&#xff08;ERNIE-4.0-8K-latest&#xff09;生成了今日要点以及每条资讯的摘要。欢迎阅读&#xff01;《AI大模型日报》今日要点&#xf…

vue elementui简易侧拉栏的使用

如图所示&#xff0c;增加了侧拉栏&#xff0c;目的是可以选择多条数据展示数据 组件&#xff1a; celadon.vue <template><div class"LayoutMain"><el-aside :width"sidebarIsCollapse ? 180px : 0px" class"aside-wrap">…

MD5加密接口

签名算法 app_key和app_secret由对方系统提供 MD5_CALCULATE_HASH_FOR_CHAR&#xff08;中文加密与JAVA不一致&#xff09; 代码&#xff1a; *获取传输字段名的ASCII码&#xff0c;根据ASCII码对字段名进行排序SELECT * FROM zthr0051WHERE functionid iv_functionidINTO …

AI音乐大模型:深度剖析创意与产业的双重变革

随着AI技术的飞速发展&#xff0c;音乐大模型在最近一个月内纷纷上线&#xff0c;这一变革性技术不仅颠覆了传统的音乐创作方式&#xff0c;更是对整个音乐产业及创意产业带来了深远的影响。本文将从多个维度出发&#xff0c;深度剖析AI音乐大模型对创意与产业的双重变革。 一、…

多模态能力评估新篇章:MMStar引领大型视觉语言模型评估新标准

随着大模型&#xff08;LLMs&#xff09;的快速发展&#xff0c;将视觉模态整合进LLMs以提升模型的交互能力已成为研究的热点。这些大型视觉语言模型&#xff08;LVLMs&#xff09;不仅展现出强大的视觉感知和理解能力&#xff0c;还能够通过对话与用户互动&#xff0c;提供更丰…

Matlab|【免费】含氢气氨气综合能源系统优化调度

目录 主要内容 部分代码 结果一览 下载链接 主要内容 该程序参考《_基于氨储能技术的电转氨耦合风–光–火综合能源系统双层优化调度》模型&#xff0c;对制氨工厂、风力发电、电制氢、燃气轮机、火电机组等主体进行建模分析&#xff0c;以火电机组启停成本、煤耗…

尚硅谷vue2的todolist案例解析,基本概括了vue2所有知识点,结尾有具体代码,复制粘贴学习即可

脚手架搭建 1-初始化脚手架&#xff08;全局安装&#xff09; npm install -g vue/cli2-切换到创建项目的空目录下 vue create xxxx整体结构 整体思路 App定义所有回调方法 增删改查 还有统一存放最终数据&#xff0c;所有子组件不拿数据&#xff0c;由App下发数据&#xf…

Spring Boot 集成 H2 数据库

1. 引言 Spring Boot 以其简洁的配置和快速开发能力&#xff0c;成为现代微服务架构的首选框架之一。而H2数据库作为一个轻量级的内存数据库&#xff0c;非常适合开发阶段作为嵌入式数据库进行单元测试和功能验证。本文将手把手教你如何在Spring Boot项目中集成H2数据库&#…

Mybatis 到 MyBatisPlus

Mybatis 到 MyBatisPlus Mybatis MyBatis&#xff08;官网&#xff1a;https://mybatis.org/mybatis-3/zh/index.html &#xff09;是一款优秀的 持久层 &#xff08;ORM&#xff09;框架&#xff0c;用于简化JDBC的开发。是 Apache的一个开源项目iBatis&#xff0c;2010年这…

DC/AC电源模块一种效率与可靠性兼备的能源转换解决方案

DC/AC电源模块都是一种效率与可靠性兼备的能源转换解决方案 DC/AC电源模块是一种能够将直流电源&#xff08;DC&#xff09;转换为交流电源&#xff08;AC&#xff09;的设备。它在现代电子设备中扮演着非常重要的角色&#xff0c;因为许多设备需要交流电源才能正常运行。无论…

VS Code修改菜单栏字体大小

修改方法 打开VS Code&#xff0c;快捷键 CtrlShiftP&#xff0c;在弹出的输入框中输入 setting&#xff0c;找到带有JSON的一项&#xff0c;如图所示&#xff1a; 原文链接 window.zoomLevel 前后变化 终端字体大小 File -> Preferences -> Settings -> Features…

云计算运维工程师的突发状况处理

云计算运维工程师在应对突发的故障和紧急情况时,需要采取一系列迅速而有效的措施来最小化服务中断的时间并恢复系统的稳定性。 以下是一些关键步骤和策略: 快速响应: 立即识别并确认故障的性质和范围。通知团队成员和相关的利益相关者,确保所有人了解当前情况。故障诊断:…

迅为iTOP-2K1000开发板龙芯中科国产64位Loognix主板

硬件配置 国产龙芯处理器&#xff0c;双核64位系统&#xff0c;板载2G DDR3内存&#xff0c;流畅运行Busybox、Buildroot、Loognix、QT5.12 系统! 接口全板载4路USB HOST、2路千兆以太网、2路UART、2路CAN总线、Mini PCIE、SATA固态盘接口、4G接口、GPS接口WIF1、蓝牙、Mini H…

环路滤波器

块效应产生的原因 块效应指视频边界不连续的变化,我们在观看视频的时候,在运动剧烈的场景常能观察到图像出现小方块,小方块在边界处呈现不连续的效果(如下图),这种现象被称为块效应(blocking artifact)。 造成这种现象的主要原因有两点: DCT量化误差导致运动补偿导致…

工业网关的功能与作用解析-天拓四方

在工业4.0和智能制造的时代背景下&#xff0c;工业网关作为连接现场设备与云端平台的桥梁&#xff0c;正发挥着日益重要的作用。它不仅为工业设备的远程监控和管理提供了可能&#xff0c;还为企业实现数字化转型和智能化升级提供了有力支持。本文将对工业网关的功能与作用进行解…

深入理解PHP命名空间

在PHP项目中&#xff0c;命名空间&#xff08;namespace&#xff09;是一个非常重要的特性。它不仅帮助开发者组织代码&#xff0c;还能避免类、函数、常量等命名冲突问题。本文将详细介绍PHP命名空间的概念、使用方法和最佳实践。 一、什么是命名空间&#xff1f; 命名空间…

【PyQt5】一文向您详细介绍 setContentsMargins() 的作用

【PyQt5】一文向您详细介绍 setContentsMargins() 的作用 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博主简介&#xff1a;985高校的普通…