ADD scDataCard 代码编辑器组件
This commit is contained in:
sakuya
parent
4b2063ff6a
commit
923465274e
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -61,6 +61,10 @@ module.exports = {
|
|||
xgplayer: {
|
||||
name: "xgplayer",
|
||||
test: /[\\/]node_modules[\\/]xgplayer.*[\\/]/
|
||||
},
|
||||
codemirror: {
|
||||
name: "codemirror",
|
||||
test: /[\\/]node_modules[\\/]codemirror[\\/]/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue