ADD scDataCard 代码编辑器组件

package.json

@@ -11,6 +11,7 @@
 		"@element-plus/icons-vue": "1.1.4",
 		"@tinymce/tinymce-vue": "5.0.0",
 		"axios": "0.27.2",
+		"codemirror": "5.65.3",
 		"core-js": "3.22.5",
 		"cropperjs": "1.5.12",
 		"crypto-js": "4.1.1",

src/components/scCodeEditor/index.vue

@@ -0,0 +1,115 @@
+<!--
+ * @Descripttion: 代码编辑器
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2022年5月20日21:46:29
+ * @LastEditors: 
+ * @LastEditTime: 
+-->
+
+<template>
+	<div class="sc-code-editor" :style="{'height':_height}">
+		<textarea ref="textarea" v-model="contentValue"></textarea>
+	</div>
+</template>
+
+<script>
+	import { markRaw } from "vue"
+
+	//框架
+	import CodeMirror from 'codemirror'
+	import 'codemirror/lib/codemirror.css'
+
+	//主题
+	import 'codemirror/theme/idea.css'
+	import 'codemirror/theme/darcula.css'
+
+	//功能
+	import 'codemirror/addon/selection/active-line'
+
+	//语言
+	import 'codemirror/mode/javascript/javascript'
+	import 'codemirror/mode/sql/sql'
+
+	export default {
+		props: {
+			modelValue: {
+				type: String,
+				default: ""
+			},
+			mode: {
+				type: String,
+				default: "javascript"
+			},
+			height: {
+				type: [String,Number],
+				default: 300,
+			},
+			options: {
+				type: Object,
+				default: () => {}
+			},
+			theme: {
+				type: String,
+				default: "idea"
+			},
+			readOnly: {
+				type: Boolean,
+				default: false
+			},
+		},
+		data() {
+			return {
+				contentValue: this.modelValue,
+				coder: null,
+				opt: {
+					theme: this.theme,	//主题
+					styleActiveLine: true,	//高亮当前行
+					lineNumbers: true,	//行号
+					lineWrapping: false,	//自动换行
+					tabSize: 4,	//Tab缩进
+					indentUnit: 4,	//缩进单位
+					indentWithTabs : true,	//自动缩进
+					mode : this.mode,	//语言
+					readOnly: this.readOnly,	//只读
+					...this.options
+				}
+			}
+		},
+		computed: {
+			_height() {
+				return Number(this.height)?Number(this.height)+'px':this.height
+			},
+		},
+		watch: {
+			modelValue(val) {
+				this.contentValue = val
+				if (val !== this.coder.getValue()) {
+					this.coder.setValue(val)
+				}
+			}
+		},
+		mounted() {
+			this.init()
+			//获取挂载的所有modes
+			//console.log(CodeMirror.modes)
+		},
+		methods: {
+			init(){
+				this.coder = markRaw(CodeMirror.fromTextArea(this.$refs.textarea, this.opt))
+				this.coder.on('change', (coder) => {
+					this.contentValue = coder.getValue()
+					this.$emit('update:modelValue', this.contentValue)
+				})
+			},
+			formatStrInJson(strValue) {
+				return JSON.stringify(JSON.parse(strValue), null, 4)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-code-editor {font-size: 14px;border: 1px solid #ddd;line-height: 150%;}
+	.sc-code-editor:deep(.CodeMirror)  {height: 100%;}
+</style>

src/views/vab/codeeditor.vue

@@ -0,0 +1,88 @@
+<template>
+	<el-main>
+		<el-alert title="感谢codeMirror组件" type="success" style="margin-bottom:20px;"></el-alert>
+		<el-row :gutter="15">
+			<el-col :lg="24">
+				<el-card shadow="never" header="JSON">
+					<sc-code-editor ref="editor" v-model="json" mode="javascript" :height="200"></sc-code-editor>
+					<div style="margin-top: 15px;">
+						<el-button type="primary" @click="getCode">获取v-model</el-button>
+						<el-button type="primary" @click="getValue">getValue()</el-button>
+						<el-button type="primary" @click="setValue">setValue()</el-button>
+					</div>
+				</el-card>
+			</el-col>
+			<el-col :lg="12">
+				<el-card shadow="never" header="javascript Darcula主题">
+					<sc-code-editor v-model="js" mode="javascript" theme="darcula"></sc-code-editor>
+				</el-card>
+			</el-col>
+
+			<el-col :lg="12">
+				<el-card shadow="never" header="SQL">
+					<sc-code-editor v-model="sql" mode="sql"></sc-code-editor>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	import { defineAsyncComponent } from 'vue';
+	const scCodeEditor = defineAsyncComponent(() => import('@/components/scCodeEditor'));
+
+	export default {
+		name: "codeeditor",
+		components: {
+			scCodeEditor
+		},
+		data(){
+			return {
+				json:
+`{
+	"name": "SCUI",
+	"menu": [
+		{
+			"title": "VUE 3",
+			"type": true,
+			"link": "https://v3.cn.vuejs.org"
+		},
+		{
+			"title": "elementplus",
+			"type": false,
+			"link": "https://element-plus.gitee.io"
+		}
+	]
+}`,
+				js:
+`// Demo code (the actual new parser character stream implementation)
+function StringStream(string) {
+	this.pos = 0;
+	this.string = string;
+}`,
+				sql:
+`SELECT \`author\`, \`title\` FROM \`posts\`
+WHERE \`status\` = 'draft' AND \`author\` IN('author1','author2')
+ORDER BY \`created_at\` DESC, \`id\` DESC LIMIT 0, 10;`
+			}
+		},
+		methods: {
+			getCode(){
+				this.$message("请查看控制台")
+				console.log(this.json)
+			},
+			getValue(){
+				this.$message("请查看控制台")
+				var v = this.$refs.editor.coder.getValue()
+				console.log(v)
+			},
+			setValue(){
+				var v = `{"key":"newValue"}`
+				this.$refs.editor.coder.setValue(v)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

vue.config.js

@@ -61,6 +61,10 @@ module.exports = {
 					xgplayer: {
 						name: "xgplayer",
 						test: /[\\/]node_modules[\\/]xgplayer.*[\\/]/
+					},
+					codemirror: {
+						name: "codemirror",
+						test: /[\\/]node_modules[\\/]codemirror[\\/]/
 					}
 				}
 			}