Skip to content

Commit 3e3bac2

Browse files
icssoaicssoa
committed
优化 cl-codemirror, cl-menu-file 等等
1 parent fff62f8 commit 3e3bac2

File tree

13 files changed

+180
-131
lines changed

13 files changed

+180
-131
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "front-next-vue3",
3-
"version": "0.1.0",
3+
"version": "0.1.1",
44
"private": true,
55
"scripts": {
66
"serve": "vue-cli-service serve",

‎src/cool/modules/base/components/codemirror/index.vue

Lines changed: 44 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<div class="cl-codemirror">
2+
<div class="cl-codemirror" ref="editorRef">
33
<textarea class="cl-code" id="editor" :height="height" :width="width"></textarea>
44
</div>
55
</template>
66

77
<script lang="ts">
8-
import { defineComponent, onMounted, watch } from "vue";
8+
import { defineComponent, nextTick, onMounted, ref, watch } from "vue";
99
import CodeMirror from "codemirror";
1010
import beautifyJs from "js-beautify";
1111
@@ -28,6 +28,8 @@ export default defineComponent({
2828
emits: ["update:modelValue", "load"],
2929
3030
setup(props, { emit }) {
31+
const editorRef = ref<any>(null);
32+
3133
let editor: any = null;
3234
3335
// 获取内容
@@ -55,52 +57,48 @@ export default defineComponent({
5557
);
5658
5759
onMounted(function() {
58-
// 实例化
59-
editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
60-
mode: "javascript",
61-
theme: "ambiance",
62-
styleActiveLine: true,
63-
lineNumbers: true,
64-
lineWrapping: true,
65-
indentUnit: 4,
66-
...props.options
67-
});
68-
69-
// 输入监听
70-
editor.on("change", (e: any) => {
71-
emit("update:modelValue", e.getValue().replace(/\s/g, ""));
60+
nextTick(() => {
61+
// 实例化
62+
editor = CodeMirror.fromTextArea(editorRef.value.querySelector("#editor"), {
63+
mode: "javascript",
64+
theme: "ambiance",
65+
styleActiveLine: true,
66+
lineNumbers: true,
67+
lineWrapping: true,
68+
indentUnit: 4,
69+
...props.options
70+
});
71+
72+
// 输入监听
73+
editor.on("change", (e: any) => {
74+
emit("update:modelValue", e.getValue().replace(/\s/g, ""));
75+
});
76+
77+
// 设置内容
78+
setValue(props.modelValue);
79+
80+
// 加载回调
81+
emit("load", editor);
82+
83+
// 设置编辑框大小
84+
editor.setSize(props.width || "auto", props.height || "auto");
85+
86+
// shift + alt + f 格式化
87+
editor.display.wrapper.onkeydown = (e: any) => {
88+
const keyCode = e.keyCode || e.which || e.charCode;
89+
const altKey = e.altKey || e.metaKey;
90+
const shiftKey = e.shiftKey || e.metaKey;
91+
92+
if (altKey && shiftKey && keyCode == 70) {
93+
setValue();
94+
}
95+
};
7296
});
73-
74-
// 加载回调
75-
emit("load", editor);
76-
77-
// 设置编辑框样式
78-
const el = editor.display.wrapper;
79-
80-
if (el) {
81-
if (props.height) {
82-
el.style.height = props.height || "50px";
83-
}
84-
85-
if (props.width) {
86-
el.style.width = props.width;
87-
}
88-
}
89-
90-
// 设置内容
91-
setValue(props.modelValue);
92-
93-
// shift + alt + f 格式化
94-
el.onkeydown = (e: any) => {
95-
const keyCode = e.keyCode || e.which || e.charCode;
96-
const altKey = e.altKey || e.metaKey;
97-
const shiftKey = e.shiftKey || e.metaKey;
98-
99-
if (altKey && shiftKey && keyCode == 70) {
100-
setValue();
101-
}
102-
};
10397
});
98+
99+
return {
100+
editorRef
101+
};
104102
}
105103
});
106104
</script>

‎src/cool/modules/base/components/dept/tree.vue

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -391,10 +391,6 @@ export default defineComponent({
391391
}
392392
}
393393
394-
:deep(.el-tree-node__content) {
395-
height: 36px;
396-
}
397-
398394
&__op {
399395
display: flex;
400396
@@ -419,6 +415,7 @@ export default defineComponent({
419415
overflow-x: hidden;
420416
421417
:deep(.el-tree-node__content) {
418+
height: 36px;
422419
margin: 0 5px;
423420
}
424421
}

‎src/cool/modules/base/components/editor-quill/index.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,15 @@ export default defineComponent({
5656
// 文件确认
5757
function onUploadSpaceConfirm(files: any[]) {
5858
if (files.length > 0) {
59+
// 批量插入图片
5960
files.forEach((file, i) => {
6061
const [type] = file.type.split("/");
6162
6263
quill.insertEmbed(cursorIndex.value + i, type, file.url, Quill.sources.USER);
6364
});
65+
66+
// 移动光标到图片后一位
67+
quill.setSelection(cursorIndex.value + files.length);
6468
}
6569
}
6670

‎src/cool/modules/base/components/menu/file.vue

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,18 @@
1515
<script lang="ts">
1616
import { defineComponent, ref, watch } from "vue";
1717
18-
const files = require
19-
.context("@/", true, /views\/(?!(components)|(.*\/components)|(index\.js)).*.(js|vue)/)
20-
.keys();
18+
// 扫描文件
19+
function findFiles() {
20+
const files = require
21+
.context("@/", true, /views\/(?!(components)|(.*\/components)|(index\.js)).*.(js|vue)/)
22+
.keys();
23+
24+
return files.map(e => {
25+
return {
26+
value: e.substr(2)
27+
};
28+
});
29+
}
2130
2231
export default defineComponent({
2332
name: "cl-menu-file",
@@ -36,7 +45,7 @@ export default defineComponent({
3645
const path = ref<string>(props.modelValue);
3746
3847
// 数据列表
39-
const list = ref<any[]>([]);
48+
const list = ref<any[]>(findFiles());
4049
4150
watch(
4251
() => props.modelValue,
@@ -49,12 +58,6 @@ export default defineComponent({
4958
emit("update:modelValue", val);
5059
});
5160
52-
list.value = files.map(e => {
53-
return {
54-
value: e.substr(2)
55-
};
56-
});
57-
5861
return {
5962
path,
6063
list

‎src/cool/modules/base/components/menu/topbar.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="app-topbar-menu">
2+
<div class="cl-menu-topbar">
33
<el-menu
44
:default-active="index"
55
mode="horizontal"
@@ -84,7 +84,7 @@ export default defineComponent({
8484
</script>
8585

8686
<style lang="scss" scoped>
87-
.app-topbar-menu {
87+
.cl-menu-topbar {
8888
margin-right: 10px;
8989
9090
:deep(.el-menu) {

‎src/cool/modules/chat/components/notice.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export default {
5151
font-size: 20px;
5252
}
5353
54-
:deep(.el-badge) {
54+
.el-badge {
5555
transform: scale(0.8);
5656
}
5757
}

‎src/cool/modules/task/components/cron/cron.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -776,12 +776,12 @@ export default {
776776

777777
<style lang="scss" scoped>
778778
.vue-cron {
779-
:deep(.el-tabs) {
779+
.el-tabs {
780780
box-shadow: none;
781781
}
782782
783783
&__item {
784-
:deep(.el-row) {
784+
.el-row {
785785
min-height: 32px;
786786
line-height: 32px;
787787
margin-bottom: 10px;

‎src/cool/modules/upload/components/index.vue

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -108,8 +108,7 @@
108108

109109
<script>
110110
import { mapGetters } from "vuex";
111-
import path from "path";
112-
import { last, isArray, isNumber, isBoolean } from "@/core/utils";
111+
import { last, isArray, isNumber, isBoolean, basename } from "@/core/utils";
113112
import { v4 as uuidv4 } from "uuid";
114113
import { clone } from "@/core/utils";
115114
@@ -344,7 +343,7 @@ export default {
344343
this.fileList = list.filter(Boolean).map(url => {
345344
return {
346345
url,
347-
name: path.basename(url),
346+
name: basename(url),
348347
uid: url
349348
};
350349
});
@@ -543,7 +542,7 @@ export default {
543542
};
544543
</script>
545544

546-
<style lang="scss" scoped>
545+
<style lang="scss">
547546
.cl-upload {
548547
display: flex;
549548
flex-wrap: wrap;
@@ -561,7 +560,7 @@ export default {
561560
562561
&--default {
563562
&:not(.is-drag) {
564-
:deep(.el-upload) {
563+
.el-upload {
565564
display: flex;
566565
align-items: center;
567566
justify-content: center;
@@ -640,7 +639,7 @@ export default {
640639
}
641640
642641
&--picture-card {
643-
:deep(.el-upload) {
642+
.el-upload {
644643
background-color: #fff;
645644
646645
.cl-upload__icon {

‎src/core/utils/index.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -289,4 +289,13 @@ export function revDeepTree(list: Array<any> = []) {
289289
return d;
290290
}
291291

292+
export function basename(path: string) {
293+
let index = path.lastIndexOf("/");
294+
index = index > -1 ? index : path.lastIndexOf("\\");
295+
if (index < 0) {
296+
return path;
297+
}
298+
return path.substring(index + 1);
299+
}
300+
292301
export { storage };

0 commit comments

Comments
 (0)