cv-editor-code 代码编辑器

简要

• 代码编辑器，自动补齐

示例

::: demo

<template>
  <div>
    <h1>cv-editor-code 演示</h1>
    <div style="max-width: 1250px; margin: 20px auto">
      <cv-form-base ref="refFormBase" :rules="formRules" :model="formData">
        <el-tabs>
          <el-tab-pane label="js编辑器">
            <h3>语法：js、主题：default</h3>
            <cv-form-item label="内容1">
              <cvEditorCode v-model="code_content1" language="js" theme="default" height="500" style="height: 500px" />
            </cv-form-item>
          </el-tab-pane>
          <el-tab-pane label="java编辑器">
            <h3>语法：java、主题：oneDark</h3>
            <cv-form-item label="内容2">
              <cvEditorCode v-model="code_content2" language="java" theme="oneDark" readOnly />
            </cv-form-item>
          </el-tab-pane>
          <el-tab-pane label="sql编辑器（）">
            <h3>语法：sql、主题：githubLight</h3>
            <cv-form-item label="内容3">
              <cvEditorCode v-model="code_content3" language="sql" theme="oneDark" />
            </cv-form-item>
          </el-tab-pane>
          <el-tab-pane label="编辑器4">
            <h3>语法：无、主题：无</h3>
            <cv-form-item label="内容4">
              <cvEditorCode v-model="code_content4" language="Handlebars" />
            </cv-form-item>
          </el-tab-pane>
        </el-tabs>
      </cv-form-base>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formRules: {},
      formData: {},
      code_content1: `import someResource from '@10yun/cv-pc-ui'
export default {
  data () {
    // 这是一个注释代码
    return {
      aaaa: 'const a = 10',
      bbbb: {
        bbb1: 4,
        bbb2: true,
      }
    }
  },
  components: examples
}`,
      code_content2: '',
      code_content22: `
import com.demo.util.MyType;
import com.demo.util.MyInterface;

public enum Enum {
  VAL1, VAL2, VAL3
}

public class Class<T, V> implements MyInterface {
  public static final MyType<T, V> member;
  
  private class InnerClass {
    public int zero() {
      return 0;
    }
  }

  @Override
  public MyType method() {
    return member;
  }

  public void method2(MyType<T, V> value) {
    method();
    value.method3();
    member = value;
  }
}

`,
      code_content3: `
SELECT 
FROM  
`,
      code_content4: `
{{#each table_list}}
package {{@root.config.package_parent}}.{{@root.config.package_module}}.{{@root.config.package_bo}};

import com.ctocode.common.mybatis.base.pojo.bo.BaseBO;
import {{@root.config.package_parent}}.{{@root.config.package_module}}.{{@root.config.package_po}}.{{class_name}}PO;
import com.fasterxml.jackson.annotation.JsonProperty;
import io.github.linpeilie.annotations.AutoMapper;
import lombok.Data;
import lombok.EqualsAndHashCode;

import java.io.Serial;

/**
 * Description: {{function_name}} 实体类
 *
 * @author {{@root.config.author}}
 * @date {{@root.comment_date}}
 */
@AutoMapper(target = {{class_name}}PO.class)
@Data
@EqualsAndHashCode(callSuper = true)
public class {{class_name}}BO extends BaseBO<{{class_name}}PO> {

    @Serial
    private static final long serialVersionUID = {{@root.serial_version_UID}}L;
 {{#each column_list}}
    
    /**
     * {{column_comment}}
     */
    @JsonProperty("{{column_name}}")
    private {{java_type}} {{java_field}};
    {{^}}
    {{/each}}
}
{{~/each}}
`
    };
  },
  watch: {
    code_content1(newVal) {
      // console.log(newVal);
    }
  },
  created() {
    setTimeout(() => {
      this.code_content2 = this.code_content22;
    }, 2000);
  },
  mounted() {},
  methods: {}
};
</script>

:::

全局配置（一般情况下不需要）

如果需要全局配置，请修改 src/plugins/cv-pc-ui.js 扩展

import cvPcUI from '@10yun/cv-pc-ui'
// 注册 全局设置
Vue.use(cvPcUI, {
  // 可以为编辑器配置全局属性, 每个实例都共享这个属性
  // 属性请参考下面
  "cvEditorCode": {
    options: {
      // ...详见[属性options参数]
    },
    toolbars:{

    }
  }
});

属性

属性名	说明	类型	默认
v-model / modelValue	组件接受的输入值也支持双向绑定。	String/Number	-
options	参数，详见 属性 options	Object
toolbars	工具，详见 属性 toolbars	Object	{copy:true}
language	语言，详见 属性 language	String	Plain Text
theme	主题，详见 属性 theme	String	oneDark
readOnly	是否只读	Boolean	false
autoSave	自动保存，通过绑定@on-act-save事件	Boolean	false
interval	自动保存间隔，单位：mm，需autoSave=true时才有效	Number	10000
width	初始宽度	String/Number	'auto'
height	初始高度，支持%	String/Number	600
bordered	是否边框	Boolean	true
exportFileName	导出文件名称，默认YYYY-MM-DD_HH:mm	String	YYYY-MM-DD_HH:mm
isFullscreen	是否全局	Boolean	false

属性options

参数名	说明	类型	默认
language	语言类型	String	''
tabSize	制表符,按Tab键时指定缩进	Number	2
lineNumbers	显示行数	Boolean	true
indentUnit	缩进位数	Number	2
line	是否显示行数	Boolean	true

• 详见短语: Codemirror internationalization phrases

属性toolbars

工具名	说明	类型	默认
copy	复制	Boolean	true

属性language

支持的语法

语言
javascript
html
json
markdown
vue
php
java
sql
python
xml
go
css

详见：https://codemirror.net/

属性theme

支持的主题

主题
default /light
oneDark
materialLight
materialDark
solarizedLight
solarizedDark
dracula
githubLight
githubDark
aura
tokyoNight
tokyoNightStorm
tokyoNightDay

详见：https://codemirror.net/

Slots插槽

插槽名	说明
title	在toolbars 增加标题名称

emits事件

事件名	说明	参数
update:modelValue	仅当内容发生更改时	(value: string, viewUpdate: ViewUpdate)
on-ready	加载成功时	(payload: { view: EditorView; state: EditorState; container:HTMLDivElement })
on-action	执行任意toolbars返回action	(action, state)
on-act-copy	复制成功后
on-act-save	自动保存后
on-act-theme	主题选择后
on-act-custom	自定义事件
on-act-choose-image	选择图片后

相关链接

UI库

• element-plus

编辑器

• vue-codemirror
• codemirror