Skip to content

Commit 9e2b66e

Browse files
rennzhangrennzhang
committed
doc: update
1 parent d1e2130 commit 9e2b66e

File tree

12 files changed

+372
-91
lines changed

12 files changed

+372
-91
lines changed

‎docs/.vitepress/config.ts

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,14 @@ function getGuideSidebar() {
3131
link: "/index",
3232
},
3333
{
34-
text: "配置",
35-
link: "/config",
34+
text: "使用说明",
3635
children: [
37-
{ text: "Props", link: "/config/props" },
38-
{ text: "事件系统", link: "/config/events" },
36+
{ text: "Props", link: "/instructions/props" },
37+
{ text: "Event system", link: "/instructions/events" },
38+
{
39+
text: "Get codemirror instance object",
40+
link: "/instructions/cminstance",
41+
},
3942
],
4043
},
4144
{

‎docs/.vitepress/theme/styles/index.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,7 @@
3838
.DocSearch {
3939
--docsearch-primary-color: var(--c-brand) !important;
4040
}
41+
42+
p > a > img {
43+
margin-right: 8px;
44+
}

‎docs/index.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
[![GitHub stars](https://img.shields.io/github/stars/RennCheung/codemirror-editor-vue3)](https://github.com/RennCheung/codemirror-editor-vue3/stargazers)
2+
[![GitHub issues](https://img.shields.io/github/issues/RennCheung/codemirror-editor-vue3)](https://github.com/RennCheung/codemirror-editor-vue3/issues)
3+
[![GitHub forks](https://img.shields.io/github/forks/RennCheung/codemirror-editor-vue3)](https://github.com/RennCheung/codemirror-editor-vue3/network)
4+
[![GitHub last commit](https://img.shields.io/github/last-commit/RennCheung/codemirror-editor-vue3)](https://github.com/RennCheung/codemirror-editor-vue3)
5+
[![license](https://img.shields.io/github/license/RennCheung/codemirror-editor-vue3)](https://github.com/RennCheung/codemirror-editor-vue3)
6+
17
### 介绍
28

39
该插件基于 [Codemirror](http://codemirror.net/)，仅支持 vue3 中使用。
@@ -109,6 +115,10 @@ export default {
109115
}
110116
</script>
111117

118+
### Get codemirror instance object
119+
120+
[View code](https://renncheung.github.io/codemirror-editor-vue3/instructions/cminstance.html)
121+
112122
### 使用[Codemirror 静态属性](https://codemirror.net/doc/manual.html#api_static)
113123

114124
```js

‎docs/instructions/cminstance.md

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
### 通过 ref 获取
2+
3+
```vue
4+
<template>
5+
<Codemirror
6+
ref="cmRefDom"
7+
v-model:value="code"
8+
:options="cmOptions"
9+
border
10+
:height="200"
11+
>
12+
</Codemirror>
13+
</template>
14+
15+
<script lang="ts">
16+
import { ref } from "vue";
17+
import { Editor, EditorConfiguration } from "codemirror";
18+
import Codemirror, { CmComponentRef } from "codemirror-editor-vue3";
19+
20+
// language
21+
import "codemirror/mode/javascript/javascript.js";
22+
23+
export default defineComponent({
24+
components: {
25+
Codemirror,
26+
},
27+
setup() {
28+
const code = ref(`const ary = []`);
29+
const cmRefDom = ref<CmComponentRef>(null);
30+
const cminstance = ref<Editor>();
31+
32+
const cmOptions: EditorConfiguration = {
33+
mode: "javascript",
34+
};
35+
36+
onMounted(() => {
37+
cminstance.value = cmRefDom.value?.cminstance;
38+
cminstance.value?.focus();
39+
});
40+
41+
// or
42+
// nextTick(() => {
43+
// cminstance.value = cmRefDom.value?.cminstance;
44+
// cminstance.value?.focus();
45+
// });
46+
47+
return {
48+
cmRefDom,
49+
code,
50+
cmOptions,
51+
};
52+
},
53+
});
54+
</script>
55+
```
56+
57+
### 通过钩子函数获取
58+
59+
```vue
60+
<template>
61+
<Codemirror
62+
v-model:value="code"
63+
:options="cmOptions"
64+
border
65+
:height="200"
66+
@ready="onReady"
67+
@change="onChange"
68+
>
69+
</Codemirror>
70+
</template>
71+
72+
<script lang="ts">
73+
import { ref } from "vue";
74+
import { Editor, EditorConfiguration } from "codemirror";
75+
import Codemirror from "codemirror-editor-vue3";
76+
77+
// language
78+
import "codemirror/mode/javascript/javascript.js";
79+
80+
export default defineComponent({
81+
components: {
82+
Codemirror,
83+
},
84+
setup() {
85+
const code = ref(`const ary = []`);
86+
const cminstance = ref<Editor>();
87+
88+
const cmOptions: EditorConfiguration = {
89+
mode: "javascript",
90+
};
91+
92+
const onReady = (cm: Editor) => {
93+
cminstance.value = cm;
94+
cminstance.value?.focus();
95+
};
96+
97+
const onChange = (value: string, cm: Editor) => {
98+
cminstance.value = cm;
99+
cminstance.value?.focus();
100+
};
101+
102+
return {
103+
code,
104+
cmOptions,
105+
onReady,
106+
onChange,
107+
};
108+
},
109+
});
110+
</script>
111+
```

‎docs/config/events.md renamed to ‎docs/instructions/events.md

File renamed without changes.

‎docs/config/props.md renamed to ‎docs/instructions/props.md

File renamed without changes.

‎docs/log/index.md

Lines changed: 77 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,40 @@
1010

1111
```vue log-mode-demo
1212
<template>
13-
<Codemirror v-model:value="code" :options="cmOptions" border :height="400" />
13+
<demo-preview v-bind="{ ...$attrs, ...$props }" name="log-mode-demo">
14+
<Codemirror
15+
v-model:value="code"
16+
:options="cmOptions"
17+
border
18+
:height="400"
19+
/>
20+
</demo-preview>
1421
</template>
1522
16-
<script setup>
23+
<script>
24+
import { ref, defineComponent } from "vue";
1725
import Codemirror, {
1826
createLinkMark,
1927
createLogMark,
2028
createTitle,
2129
} from "codemirror-editor-vue3";
22-
import { ref } from "vue";
2330
24-
const code = ref(`完整日志下载地址：${createLinkMark({
25-
href: "/logDownload",
26-
download: "",
27-
target: "_blank",
28-
})}
31+
export default defineComponent({
32+
components: { Codemirror },
33+
setup() {
34+
const code = ref(`完整日志下载地址：${createLinkMark({
35+
href: "/logDownload",
36+
download: "",
37+
target: "_blank",
38+
})}
2939
${createTitle("基本日志")}
3040
${createLogMark("2021-08-26 15:07:09: job is success", "info")}
3141
${createLogMark("2021-08-26 15:07:09: job is success", "warning")}
3242
${createLogMark("2021-08-26 15:07:09: job is error", "error")}
3343
${createTitle("带有时间节点")}
3444
${createLinkMark({ href: "/logDownload", download: "", target: "_blank" })}
3545
36-
====================引擎日志====================
46+
====================引擎日志====================
3747
3848
DataStreamMain start
3949
java.lang.NullPointerException
@@ -46,10 +56,21 @@ at com.zhiweicloud.dataprocess.engine.FlinkEngine.buildFlinkStream(FlinkEngine.
4656
at com.zhiweicloud.dataprocess.engine.FlinkEngine.startFlinkEngine(FlinkEngine.
4757
at com.zhiweicloud.dataprocess.DataStreamMain.main(DataStreamMain.
4858
`);
49-
const cmOptions = {
50-
mode: "log",
51-
theme: "default",
52-
};
59+
const cmOptions = {
60+
mode: "log",
61+
theme: "default",
62+
};
63+
return {
64+
Codemirror,
65+
createLinkMark,
66+
createLogMark,
67+
createTitle,
68+
ref,
69+
code,
70+
cmOptions,
71+
};
72+
},
73+
});
5374
</script>
5475
```
5576

@@ -59,31 +80,42 @@ const cmOptions = {
5980

6081
```vue fclog-mode-demo
6182
<template>
62-
<Codemirror v-model:value="code" :options="cmOptions" border :height="400" />
83+
<demo-preview v-bind="{ ...$attrs, ...$props }" name="fclog-mode-demo">
84+
<Codemirror
85+
v-model:value="code"
86+
:options="cmOptions"
87+
border
88+
:height="400"
89+
/>
90+
<a href=""></a>
91+
</demo-preview>
6392
</template>
6493
65-
<script setup>
94+
<script>
95+
import { ref, defineComponent } from "vue";
6696
import Codemirror, {
6797
createLinkMark,
6898
createLogMark,
6999
createLog,
70100
createTitle,
71101
} from "codemirror-editor-vue3";
72-
import { ref } from "vue";
73102
74-
const code = ref(`完整日志下载地址：${createLinkMark({
75-
href: "/logDownload",
76-
download: "",
77-
target: "_blank",
78-
})}
103+
export default defineComponent({
104+
components: { Codemirror },
105+
setup() {
106+
const code = ref(`完整日志下载地址：${createLinkMark({
107+
href: "/logDownload",
108+
download: "",
109+
target: "_blank",
110+
})}
79111
${createTitle("基本日志")}
80112
${createLogMark("2021-08-26 15:07:09: job is success", "info")}
81113
${createLogMark("2021-08-26 15:07:09: job is success", "warning")}
82114
${createLogMark("2021-08-26 15:07:09: job is error", "error")}
83115
${createTitle("带有时间节点")}
84-
${createLog("info", "info")}
85-
${createLog("warning", "warning")}
86-
${createLog("error", "error")}
116+
${createLog("info content", "info")}
117+
${createLog("warning content", "warning")}
118+
${createLog("error content", "error")}
87119
${createLinkMark({ href: "/logDownload", download: "", target: "_blank" })}
88120
89121
${createTitle("引擎日志")}
@@ -99,14 +131,28 @@ at com.zhiweicloud.dataprocess.engine.FlinkEngine.buildFlinkStream(FlinkEngine.
99131
at com.zhiweicloud.dataprocess.engine.FlinkEngine.startFlinkEngine(FlinkEngine.
100132
at com.zhiweicloud.dataprocess.DataStreamMain.main(DataStreamMain.
101133
`);
102-
const cmOptions = {
103-
mode: "fclog",
104-
theme: "default",
105-
};
134+
const cmOptions = {
135+
mode: "fclog",
136+
theme: "default",
137+
};
138+
return {
139+
Codemirror,
140+
createLinkMark,
141+
createLogMark,
142+
createLog,
143+
createTitle,
144+
ref,
145+
code,
146+
cmOptions,
147+
};
148+
},
149+
});
106150
</script>
107151
```
108152

109-
<script >
153+
<script>
154+
import { shallowRef } from "vue"
155+
110156
export default {
111157
data() {
112158
return {
@@ -117,17 +163,10 @@ export default {
117163

118164
mounted() {
119165
import('../views/demo/log/index.vue').then((module) => {
120-
console.log(module)
121-
122-
this.log = module.default
123-
console.log(this.log)
124-
166+
this.log = shallowRef(module.default)
125167
})
126168
import('../views/demo/log/fclog.vue').then((module) => {
127-
console.log(module)
128-
this.fcLog = module.default
129-
console.log(this.fcLog)
130-
169+
this.fcLog = shallowRef(module.default)
131170
})
132171
}
133172
}

0 commit comments

Comments
 (0)