From 12cf420ba7b6f85ebd7883fa799df5d8b5cd0ecf Mon Sep 17 00:00:00 2001
From: heimawl <1785969728@qq.com>
Date: 星期一, 26 六月 2023 15:09:49 +0800
Subject: [PATCH] 配置代码编辑依赖
---
src/main.js | 9 ++++++++-
package.json | 2 ++
src/views/Intelligentcenter/centercontrol/index.vue | 33 +++++++++++++++++++++++++++++++++
src/utils/cm-setting.js | 13 +++++++++++++
4 files changed, 56 insertions(+), 1 deletions(-)
diff --git a/package.json b/package.json
index a3e8e13..f14e1c0 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
"@riophae/vue-treeselect": "0.4.0",
"axios": "0.24.0",
"clipboard": "2.0.8",
+ "codemirror": "^5.65.13",
"core-js": "^3.25.3",
"cos-js-sdk-v5": "^1.4.18",
"dayjs": "^1.11.7",
@@ -60,6 +61,7 @@
"sortablejs": "1.10.2",
"vue": "2.6.12",
"vue-cli": "^2.9.6",
+ "vue-codemirror": "^4.0.6",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
"vue-meta": "2.4.0",
diff --git a/src/main.js b/src/main.js
index 3bb7dce..3ae7057 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,7 +20,14 @@
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
- Vue.use(VueQuillEditor)
+ Vue.use(VueQuillEditor);
+ // 寮曞叆
+import { codemirror } from "vue-codemirror";
+import "@/utils/cm-setting.js";
+Vue.component("codemirror", codemirror);
+// import VueCodeMirror from 'vue-codemirror'
+// import 'vue-codemirror/dist/codemirror.css'
+// Vue.use(VueCodeMirror)
//瀹炵幇quill-editor缂栬緫鍣ㄦ嫋鎷戒笂浼犲浘鐗�
// import Quill from 'quill'
diff --git a/src/utils/cm-setting.js b/src/utils/cm-setting.js
new file mode 100644
index 0000000..2bdd0c6
--- /dev/null
+++ b/src/utils/cm-setting.js
@@ -0,0 +1,13 @@
+// cm-setting.js
+// 缁勪欢鏍峰紡
+import "codemirror/lib/codemirror.css";
+// 涓婚
+import "codemirror/theme/3024-day.css"; // 寮曞叆涓婚鏍峰紡锛屾牴鎹缃殑theme鐨勪富棰樺紩鍏�
+import "codemirror/theme/ayu-mirage.css";
+import "codemirror/theme/monokai.css";
+import 'codemirror/theme/rubyblue.css'
+// html浠ｇ爜楂樹寒
+import "codemirror/mode/htmlmixed/htmlmixed.js";
+// 璇█妯″紡
+import 'codemirror/mode/javascript/javascript.js'
+
diff --git a/src/views/Intelligentcenter/centercontrol/index.vue b/src/views/Intelligentcenter/centercontrol/index.vue
index 18aa895..c5b36bc 100644
--- a/src/views/Intelligentcenter/centercontrol/index.vue
+++ b/src/views/Intelligentcenter/centercontrol/index.vue
@@ -76,16 +76,37 @@
</el-tab-pane>
</el-tabs>
</div>
+ <div class="leftvalu-code">
+ <codemirror v-model="code" :options="options"></codemirror>
+ </div>
</div>
</div>
</template>
<script>
+// import { codemirror } from "vue-codemirror";
export default {
name: "education",
data() {
return {
+ code: "",
+ options: {
+ line: true,
+ theme: "rubyblue", // 涓婚
+ tabSize: 4, // 鍒惰〃绗︾殑瀹藉害
+ indentUnit: 2, // 涓�涓潡搴旇缂╄繘澶氬皯涓┖鏍硷紙鏃犺杩欏湪缂栬緫璇█涓剰鍛崇潃浠�涔堬級銆傞粯璁ゅ�间负 2銆�
+ firstLineNumber: 1, // 浠庡摢涓暟瀛楀紑濮嬭绠楄鏁般�傞粯璁ゅ�间负 1銆�
+ readOnly: false, // 鍙
+ autorefresh: true,
+ smartIndent: true, // 涓婁笅鏂囩缉杩�
+ lineNumbers: true, // 鏄惁鏄剧ず琛屽彿
+ styleActiveLine: true, // 楂樹寒閫変腑琛�
+ viewportMargin: Infinity, //澶勭悊楂樺害鑷�傚簲鏃舵惌閰嶄娇鐢�
+ showCursorWhenSelecting: true, // 褰撻�夋嫨澶勪簬娲诲姩鐘舵�佹椂鏄惁搴旂粯鍒舵父鏍�
+ mode: "javascript",
+ },
+
editableTabsValue: "2-2-3",
editableTabslist: [
{
@@ -183,6 +204,17 @@
.educationmanagement {
display: flex;
}
+.leftvalu-code {
+ // background: #3a3d42;
+ // height: 300px;
+ // ::v-deep.CodeMirror {
+ // position: relative;
+ // overflow: hidden;
+ // background: #3a3d42;
+ // color: #3a92ef;
+ // font-size: 20px;
+ // }
+}
.sidecolumn {
width: 300px;
min-height: 100vh;
@@ -219,6 +251,7 @@
display: center !important;
}
}
+
.qrcode-dialo {
text-align: center;
// display: flex;
--
Gitblit v1.9.3