diff --git a/src/components/code-editor.vue b/src/components/code-editor.vue
index 346ae82..7b43ece 100644
--- a/src/components/code-editor.vue
+++ b/src/components/code-editor.vue
@@ -15,24 +15,62 @@ import {
export default {
props: {
lang: { type: String, default: 'vue' },
- code: String
+ code: ''
+ },
+
+ watch: {
+ code(v) {
+ let doc = this.$view.state.doc
+
+ this.$view.dispatch({
+ changes: {
+ from: 0,
+ to: doc.length,
+ insert: v
+ }
+ })
+ }
},
mounted() {
+ let lang = this.lang
+ this.$last = this.code
+
this.$view = new EditorView({
doc: this.code,
- extensions: minimalSetup(vue(), EditorView.lineWrapping),
+ extensions: minimalSetup(
+ lang === 'html'
+ ? html()
+ : lang === 'js'
+ ? javascript()
+ : lang === 'css'
+ ? css()
+ : vue(),
+ EditorView.lineWrapping,
+ // 监听代码变化
+ EditorView.updateListener.of(v => {
+ let value = v.state.doc.toString().trim()
+ if (!this.$last || value === this.$last) {
+ this.$last = value
+ return
+ }
+ this.$last = value
+ this.$emit('change', value, lang)
+ })
+ ),
parent: this.$refs.container
})
- }
+ },
+
+ methods: {}
}
diff --git a/src/pages/playground/main.js b/src/pages/playground/main.js
index 9282717..4d5b942 100644
--- a/src/pages/playground/main.js
+++ b/src/pages/playground/main.js
@@ -1,4 +1,12 @@
+/**
+ * {}
+ * @author yutent
+ * @date 2023/04/26 18:28:13
+ */
+
import { createApp } from 'vue'
+import '//jscdn.ink/@bd/ui/latest/tabs/index.js'
+
import App from './app.vue'
import store from './store'
diff --git a/src/pages/playground/views/preview.vue b/src/pages/playground/views/preview.vue
index 7458b74..3a2b2da 100644
--- a/src/pages/playground/views/preview.vue
+++ b/src/pages/playground/views/preview.vue
@@ -1,12 +1,66 @@
-
+
+
+
+
+
+