bovo-editor 代码编辑器

bv-editor

组件库目录说明

bovo-editor
    └ dist    // 打包生成文件
    └ node    // node 运行文件
        version.ts    // 修改package中的版本号，自动提升
    └ node_modules    // pnpm 引入包文件
    └ packages    // 组件代码实现
        component.ts    // 组件代码
        config.ts    // 公共配置
        events.ts    // 组件事件代码
        index.ts    // 组件入口
        monaco-editor.ts    // 组件monaco-editor代码引用
        props.ts     // 组件参数配置
    └ preserve    // 保留的代码
    └ src    // 测试代码
    .gitignore    //  git上传过滤文件
    index.html       // 测试代码入口
    LICENSE    //  npm生成证书文件
    package.json    //  package项目配置文件
    pnpm-lock.yaml    //  pnpm 文件引入配置文件
    README.md    //  项目说明md文件
    tsconfig.json    //  typescript配置文件
    tsconfig.node.json    //  typescript 的node配置文件
    tsup.config.ts    // 打包配置
    vite.config.ts    //  vite配置文件，打包配置

bv-editor 入参

| 参数名称 | 参数类型 | 参数说明 | 参数默认值 | | :--------- | :------- | :-------------------------------- | :--------- | | config | Object | 创建参数配置 | | | language | String | 语言类型 | | | theme | String | 主题样式 | vs | | diff | Boolean | 是否是比较 | false | | diffValue | String | 要比较左边数据 diff = true 才有用 | '' | | modelValue | String | 输入值 | '' |

bv-editor 事件

| 事件名称 | 参数说明 | 事件返回值 | | :---------------- | :--------------------- | :---------------- | | change | 代码变化时触发 | String:当前的代码 | | update:modelValue | v-model 输入代码后触发 | String:当前的代码 |

使用方法

引用 bovo-editor 包

pnpm install bovo-editor

<template>
    <BvEditor
        class="bv-editor"
        :config="config"
        language="typescript"
        v-model="code"
        @change="onChange"
    />
</template>

<script setup lang="ts">
import { BvEditor } from 'bovo-editor';
import { ref } from 'vue';
const config = {};
const code = ref(`type Obj = {
  a?: string;
  b?: number;
  c?: boolean;
};
let value: Obj = {};
function setValue(v: Obj | Obj[keyof Obj], k?: keyof Obj) {
  if (k) {
      value[k] = v as Obj[keyof Obj];
  } else {
      value = v as Obj;
  }
}`);
function onChange(value: string) {
    console.log('value', value);
}
</script>