Skip to content

Commit c759a2f

Browse files
committed
docs: Supplementary document details
1 parent 44110a6 commit c759a2f

File tree

2 files changed

+219
-85
lines changed

2 files changed

+219
-85
lines changed

docs/en/guide/getting-started.md

Lines changed: 109 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -80,10 +80,14 @@ app.use(InstallCodemirro, { componentName: "customName" }); // [!code ++]
8080

8181
:::
8282

83-
---
84-
8583
## Use in components
8684

85+
This is a commonly used javascript language case.
86+
87+
<component v-if="dynamicComponent" :is="dynamicComponent"></component>
88+
89+
Specific code is as follows:
90+
8791
::: code-group
8892

8993
```vue [index.vue]
@@ -92,41 +96,77 @@ app.use(InstallCodemirro, { componentName: "customName" }); // [!code ++]
9296
v-model:value="code"
9397
:options="cmOptions"
9498
border
95-
placeholder="test placeholder"
96-
:height="200"
99+
ref="cmRef"
100+
height="400"
101+
width="600"
97102
@change="onChange"
98-
/>
103+
@input="onInput"
104+
@ready="onReady"
105+
>
106+
</Codemirror>
99107
</template>
100-
101108
<script>
102-
import Codemirror from "codemirror-editor-vue3";
103-
104-
// placeholder
105-
import "codemirror/addon/display/placeholder.js";
106-
// language
107-
import "codemirror/mode/javascript/javascript.js";
108-
109-
import { ref } from "vue";
109+
import { ref, onMounted, onUnmounted } from 'vue'
110+
import 'codemirror/mode/javascript/javascript.js'
111+
import Codemirror from 'codemirror-editor-vue3'
110112
export default {
111113
components: { Codemirror },
112114
setup() {
113-
const code = ref(`var i = 0;
115+
const code = ref(
116+
`var i = 0;
114117
for (; i < 9; i++) {
115118
console.log(i);
116119
// more statements
117-
};`);
120+
}
121+
`)
122+
123+
const cmRef = ref()
124+
const cmOptions = {
125+
mode: 'text/javascript'
126+
}
127+
const onChange = (val, cm) => {
128+
console.log(val)
129+
console.log(cm.getValue())
130+
}
131+
132+
const onInput = (val) => {
133+
console.log(val)
134+
}
135+
136+
const onReady = (cm) => {
137+
console.log(cm.focus())
138+
}
139+
140+
onMounted(() => {
141+
setTimeout(() => {
142+
cmRef.value?.refresh()
143+
}, 1000)
144+
145+
setTimeout(() => {
146+
cmRef.value?.resize(300, 200)
147+
}, 2000)
148+
149+
setTimeout(() => {
150+
cmRef.value?.cminstance.isClean()
151+
}, 3000)
152+
})
153+
154+
onUnmounted(() => {
155+
cmRef.value?.destroy()
156+
})
118157
119158
return {
120159
code,
121-
cmOptions: {
122-
mode: "text/javascript", // language mode
123-
theme: "default", // theme
124-
},
125-
onChange(val, cm) {},
126-
};
127-
},
128-
};
160+
cmRef,
161+
cmOptions,
162+
onChange,
163+
onInput,
164+
onReady
165+
}
166+
}
167+
}
129168
</script>
169+
130170
```
131171

132172
```vue [index.vue(ts setup)]
@@ -135,45 +175,71 @@ for (; i < 9; i++) {
135175
v-model:value="code"
136176
:options="cmOptions"
137177
border
138-
placeholder="测试 placeholder"
139-
:height="200"
178+
ref="cmRef"
179+
height="400"
180+
width="600"
140181
@change="onChange"
141-
/>
182+
@input="onInput"
183+
@ready="onReady"
184+
>
185+
</Codemirror>
142186
</template>
143-
144-
<script setup lang="ts">
187+
<script lang="ts" setup>
188+
import { ref, onMounted, onUnmounted } from "vue";
189+
import "codemirror/mode/javascript/javascript.js";
145190
import Codemirror from "codemirror-editor-vue3";
191+
import type { CmComponentRef } from "codemirror-editor-vue3"
146192
import type { Editor, EditorConfiguration } from "codemirror";
147193
148-
// placeholder
149-
import "codemirror/addon/display/placeholder.js";
150-
// language
151-
import "codemirror/mode/javascript/javascript.js";
152-
153-
import { ref } from "vue";
154-
const code = ref(`var i = 0;
194+
const code = ref(
195+
`var i = 0;
155196
for (; i < 9; i++) {
156197
console.log(i);
157198
// more statements
158-
};`);
159-
199+
}
200+
`);
201+
const cmRef = ref<CmComponentRef>()
160202
const cmOptions: EditorConfiguration = {
161-
mode: "text/javascript", // language mode
162-
theme: "default", // theme
203+
mode: "text/javascript",
163204
};
164205
165206
const onChange = (val: string, cm: Editor) => {
166207
console.log(val);
167208
console.log(cm.getValue());
168209
};
210+
211+
const onInput = (val: string) => {
212+
console.log(val);
213+
};
214+
215+
const onReady = (cm: Editor) => {
216+
console.log(cm.focus());
217+
};
218+
219+
onMounted(() => {
220+
setTimeout(() => {
221+
cmRef.value?.refresh()
222+
}, 1000);
223+
224+
setTimeout(() => {
225+
cmRef.value?.resize(300,200)
226+
}, 2000);
227+
228+
setTimeout(() => {
229+
cmRef.value?.cminstance.isClean()
230+
}, 3000);
231+
})
232+
233+
onUnmounted(() => {
234+
cmRef.value?.destroy()
235+
})
169236
</script>
237+
238+
170239
```
171240

172241
:::
173242

174-
Example:
175-
176-
<component v-if="dynamicComponent" :is="dynamicComponent"></component>
177243

178244
<script >
179245
import {shallowRef} from "vue"

0 commit comments

Comments
 (0)