mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2024-11-01 06:02:38 +08:00
更新 codemirror
This commit is contained in:
icssoa
parent
24e6bd3d56
commit
aae892efde
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "front-next",
|
||||
"version": "0.5.0",
|
||||
"version": "0.5.1",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc --noEmit --skipLibCheck && vite build",
|
||||
@ -11,7 +11,7 @@
|
||||
"dependencies": {
|
||||
"array.prototype.flat": "^1.2.4",
|
||||
"axios": "^0.21.1",
|
||||
"cl-admin-crud-vue3": "^0.2.1",
|
||||
"cl-admin-crud-vue3": "^0.3.0",
|
||||
"clipboard": "^2.0.8",
|
||||
"clone-deep": "^4.0.1",
|
||||
"codemirror": "^5.60.0",
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div ref="editorRef" class="cl-codemirror">
|
||||
<textarea id="editor" class="cl-code" :height="height" :width="width"></textarea>
|
||||
|
||||
<div class="cl-codemirror__tools">
|
||||
<el-button size="mini" @click="formatCode">格式化</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -8,12 +12,12 @@
|
||||
import { defineComponent, nextTick, onMounted, ref, watch } from "vue";
|
||||
import CodeMirror from "codemirror";
|
||||
import beautifyJs from "js-beautify";
|
||||
|
||||
import "codemirror/theme/cobalt.css";
|
||||
import "codemirror/lib/codemirror.css";
|
||||
import "codemirror/addon/hint/show-hint.css";
|
||||
import "codemirror/theme/hopscotch.css";
|
||||
import "codemirror/addon/hint/javascript-hint";
|
||||
import "codemirror/mode/javascript/javascript";
|
||||
import { deepMerge } from "/@/core/utils";
|
||||
|
||||
export default defineComponent({
|
||||
name: "cl-codemirror",
|
||||
@ -34,13 +38,24 @@ export default defineComponent({
|
||||
|
||||
// 获取内容
|
||||
function getValue() {
|
||||
return editor ? editor.getValue() : "";
|
||||
if (editor) {
|
||||
return editor.getValue();
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
// 设置内容
|
||||
function setValue(val?: string) {
|
||||
if (editor) {
|
||||
editor.setValue(beautifyJs(val || getValue()));
|
||||
editor.setValue(val || "");
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化
|
||||
function formatCode() {
|
||||
if (editor) {
|
||||
editor.setValue(beautifyJs(getValue()));
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,10 +63,8 @@ export default defineComponent({
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val: string) => {
|
||||
if (editor) {
|
||||
if (val != getValue().replace(/\s/g, "")) {
|
||||
setValue(val);
|
||||
}
|
||||
if (editor && val != getValue()) {
|
||||
setValue(val);
|
||||
}
|
||||
}
|
||||
);
|
||||
@ -59,45 +72,54 @@ export default defineComponent({
|
||||
onMounted(function () {
|
||||
nextTick(() => {
|
||||
// 实例化
|
||||
editor = CodeMirror.fromTextArea(editorRef.value.querySelector("#editor"), {
|
||||
mode: "javascript",
|
||||
theme: "ambiance",
|
||||
styleActiveLine: true,
|
||||
lineNumbers: true,
|
||||
lineWrapping: true,
|
||||
indentUnit: 4,
|
||||
...props.options
|
||||
});
|
||||
editor = CodeMirror.fromTextArea(
|
||||
editorRef.value.querySelector("#editor"),
|
||||
deepMerge(
|
||||
{
|
||||
mode: "javascript",
|
||||
theme: "hopscotch",
|
||||
styleActiveLine: true,
|
||||
lineNumbers: true,
|
||||
lineWrapping: true,
|
||||
indentWithTabs: true,
|
||||
indentUnit: 4,
|
||||
extraKeys: { Ctrl: "autocomplete" },
|
||||
foldGutter: true,
|
||||
autofocus: true,
|
||||
matchBrackets: true,
|
||||
autoCloseBrackets: true,
|
||||
gutters: [
|
||||
"CodeMirror-linenumbers",
|
||||
"CodeMirror-foldgutter",
|
||||
"CodeMirror-lint-markers"
|
||||
]
|
||||
},
|
||||
props.options
|
||||
)
|
||||
);
|
||||
|
||||
// 输入监听
|
||||
editor.on("change", (e: any) => {
|
||||
emit("update:modelValue", e.getValue().replace(/\s/g, ""));
|
||||
emit("update:modelValue", e.getValue());
|
||||
});
|
||||
|
||||
// 设置内容
|
||||
setValue(props.modelValue);
|
||||
|
||||
// 格式化
|
||||
formatCode();
|
||||
|
||||
// 加载回调
|
||||
emit("load", editor);
|
||||
|
||||
// 设置编辑框大小
|
||||
editor.setSize(props.width || "auto", props.height || "auto");
|
||||
|
||||
// shift + alt + f 格式化
|
||||
editor.display.wrapper.onkeydown = (e: any) => {
|
||||
const keyCode = e.keyCode || e.which || e.charCode;
|
||||
const altKey = e.altKey || e.metaKey;
|
||||
const shiftKey = e.shiftKey || e.metaKey;
|
||||
|
||||
if (altKey && shiftKey && keyCode == 70) {
|
||||
setValue();
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
editorRef
|
||||
editorRef,
|
||||
formatCode
|
||||
};
|
||||
}
|
||||
});
|
||||
@ -109,169 +131,12 @@ export default defineComponent({
|
||||
border: 1px solid #dcdfe6;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
}
|
||||
line-height: 150%;
|
||||
|
||||
.cm-s-ambiance * {
|
||||
font-family: "Consolas";
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-header {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-quote {
|
||||
color: #24c2c7;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-keyword {
|
||||
color: #a626a4;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-atom {
|
||||
color: #986801;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-number {
|
||||
color: #986801;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-def {
|
||||
color: #383a42;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-variable {
|
||||
color: #4078f2;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-variable-2 {
|
||||
color: #eed1b3;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-variable-3,
|
||||
.cm-s-ambiance .cm-type {
|
||||
color: #faded3;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-property {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-operator {
|
||||
color: #0184bc;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-comment {
|
||||
color: #555;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-string {
|
||||
color: #50a14f;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-string-2 {
|
||||
color: #9d937c;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-meta {
|
||||
color: #d2a8a1;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-qualifier {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-builtin {
|
||||
color: #9999cc;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-bracket {
|
||||
color: #24c2c7;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-tag {
|
||||
color: #fee4ff;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-attribute {
|
||||
color: #9b859d;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-hr {
|
||||
color: pink;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-link {
|
||||
color: #f4c20b;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-special {
|
||||
color: #ff9d00;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .cm-error {
|
||||
color: #af2018;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .CodeMirror-matchingbracket {
|
||||
color: #0f0;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .CodeMirror-nonmatchingbracket {
|
||||
color: #f22;
|
||||
}
|
||||
|
||||
.cm-s-ambiance div.CodeMirror-selected {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.cm-s-ambiance.CodeMirror-focused div.CodeMirror-selected {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.cm-s-ambiance .CodeMirror-line::selection,
|
||||
.cm-s-ambiance .CodeMirror-line > span::selection,
|
||||
.cm-s-ambiance .CodeMirror-line > span > span::selection {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.cm-s-ambiance .CodeMirror-line::-moz-selection,
|
||||
.cm-s-ambiance .CodeMirror-line > span::-moz-selection,
|
||||
.cm-s-ambiance .CodeMirror-line > span > span::-moz-selection {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Editor styling */
|
||||
.cm-s-ambiance.CodeMirror {
|
||||
line-height: 1.4em;
|
||||
color: #383a42;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .CodeMirror-gutters {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .CodeMirror-linenumber {
|
||||
color: #666;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .CodeMirror-guttermarker {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .CodeMirror-guttermarker-subtle {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .CodeMirror-cursor {
|
||||
border-left: 1px solid #999;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.cm-s-ambiance .CodeMirror-activeline-background {
|
||||
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.031);
|
||||
&__tools {
|
||||
background-color: #322931;
|
||||
padding: 10px;
|
||||
border-top: 1px solid #444;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
109
src/cool/modules/base/components/image/index.vue
Normal file
109
src/cool/modules/base/components/image/index.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div
|
||||
class="cl-image"
|
||||
:style="{
|
||||
'justify-content': justify,
|
||||
height: sty.h
|
||||
}"
|
||||
>
|
||||
<el-image
|
||||
:src="urls[0]"
|
||||
:fit="fit"
|
||||
:lazy="lazy"
|
||||
:preview-src-list="urls"
|
||||
:style="{
|
||||
height: sty.h,
|
||||
width: sty.w
|
||||
}"
|
||||
>
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from "vue";
|
||||
import { isArray, isNumber, isString } from "/@/core/utils";
|
||||
|
||||
export default defineComponent({
|
||||
name: "cl-image",
|
||||
|
||||
props: {
|
||||
size: {
|
||||
type: [Number, Array],
|
||||
default: 100
|
||||
},
|
||||
lazy: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
fit: {
|
||||
type: String,
|
||||
default: "cover"
|
||||
},
|
||||
src: [String, Array],
|
||||
justify: {
|
||||
type: String,
|
||||
default: "center"
|
||||
}
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const urls = computed(() => {
|
||||
const urls: any = props.src;
|
||||
|
||||
if (isArray(urls)) {
|
||||
return urls;
|
||||
}
|
||||
|
||||
if (isString(urls)) {
|
||||
return (urls || "").split(",").filter(Boolean);
|
||||
}
|
||||
|
||||
return [];
|
||||
});
|
||||
|
||||
const sty = computed(() => {
|
||||
const [h, w]: any = isNumber(props.size) ? [props.size, props.size] : props.size;
|
||||
|
||||
return {
|
||||
h: isNumber(h) ? h + "px" : h,
|
||||
w: isNumber(w) ? w + "px" : w
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
urls,
|
||||
sty
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cl-image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.el-image {
|
||||
display: block;
|
||||
|
||||
.image-slot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 3px;
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -123,14 +123,18 @@ export default defineComponent({
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 200px;
|
||||
margin-right: 20px;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
color: #d8d8d8;
|
||||
white-space: nowrap;
|
||||
margin-right: 10px;
|
||||
|
||||
&.active {
|
||||
color: #000;
|
||||
|
||||
@ -930,10 +930,10 @@ change-case@^4.1.2:
|
||||
optionalDependencies:
|
||||
fsevents "~2.3.1"
|
||||
|
||||
cl-admin-crud-vue3@^0.2.1:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/cl-admin-crud-vue3/-/cl-admin-crud-vue3-0.2.1.tgz#5d9e37efb4caf8d084ae759d6b097bc54b708999"
|
||||
integrity sha512-UPEEMCiPo5xFcLYDBqrKwR/jk7QK9MN7uOz3HAbrxl728L3g4T/Ogh01kfSrbASXv3YwZ+PkqcixAvtnh7WAPA==
|
||||
cl-admin-crud-vue3@^0.3.0:
|
||||
version "0.3.0"
|
||||
resolved "https://registry.nlark.com/cl-admin-crud-vue3/download/cl-admin-crud-vue3-0.3.0.tgz?cache=0&sync_timestamp=1624438098113&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcl-admin-crud-vue3%2Fdownload%2Fcl-admin-crud-vue3-0.3.0.tgz#393c314bb7c20f84f2d4d460fe62b3c538f3e1b3"
|
||||
integrity sha1-OTwxS7fCD4Ty1NRg/mKzxTjz4bM=
|
||||
dependencies:
|
||||
array.prototype.flat "^1.2.4"
|
||||
core-js "^3.6.5"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user