1. 完整示例：vue-codemirror+vue3-sfc-loader实现在线编辑和预览功能
// Home.vue
<template>
<div>
<codemirror
v-model="code"
placeholder="Code goes here..."
:style="{ height: '400px' }"
:autofocus="true"
:indent-with-tab="true"
:tab-size="2"
:extensions="extensions"
@ready="handleReady"
@change="log('change', $event)"
@focus="log('focus', $event)"
@blur="blur('blur', $event)"
/>
<component :is="previewComp"></component>
</div>
</template>
<script setup>
import { defineAsyncComponent, ref, shallowRef } from "vue";
import * as Vue from "vue";
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { vue } from "@codemirror/lang-vue";
import { oneDark } from "@codemirror/theme-one-dark";
import { loadModule } from "vue3-sfc-loader";
const code = ref("");
const previewComp = shallowRef();
const extensions = [vue(), oneDark];
// Codemirror EditorView instance ref
const view = shallowRef();
const handleReady = (payload) => {
view.value = payload.view;
};
const log = (type, event) => {
console.log(type, event, code.value);
};
const blur = () => {
console.log(code.value);
try {
const options = {
moduleCache: {
vue: Vue
},
async getFile() {
return code.value;
},
addStyle(textContent) {
const style = Object.assign(document.createElement("style"), {
textContent
});
const ref = document.head.getElementsByTagName("style")[0] || null;
document.head.insertBefore(style, ref);
}
};
const comp = defineAsyncComponent(() =>
loadModule("myComponent.vue", options)
);
console.log(comp);
previewComp.value = comp;
} catch (err) {
console.error(err);
}
};
</script>
2.实现在线编辑器:使用codemirror的vue版本vue-codemirror
<template>
<div>
<select name="" id="" v-model="lang" @change="langChange">
<option :value="item.value" v-for="item in langList" :key="item.value">
{{ item.label }}
</option>
</select>
</div>
<div>
<codemirror
v-model="code"
placeholder="Code goes here..."
:style="{ height: '400px' }"
:autofocus="true"
:indent-with-tab="true"
:tab-size="2"
:extensions="extensions"
@ready="handleReady"
@change="log('change', $event)"
@focus="log('focus', $event)"
@blur="blur('blur', $event)"
/>
</div>
</template>
<script setup>
import { defineAsyncComponent, ref, shallowRef } from "vue";
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { vue } from "@codemirror/lang-vue";
import { oneDark } from "@codemirror/theme-one-dark";
const code = ref("");
const langList = ref([
{
label: "javascript",
value: javascript
},
{
label: "vue",
value: vue
}
]);
const lang = ref();
const previewComp = shallowRef();
lang.value = langList.value[1].value;
const extensions = [lang.value(), oneDark];
// Codemirror EditorView instance ref
const view = shallowRef();
const handleReady = (payload) => {
view.value = payload.view;
};
const langChange = () => {};
const log = (type, event) => {
console.log(type, event, code.value);
};
</script>
3.预览:使用vue3-sfc-loader解析xxx.vue文件或者字符串
使用.vue文件
https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/docs/examples.md
<template>
<component :is="previewComp"></component>
</template>
<script setup>
import { defineAsyncComponent, shallowRef} from "vue";
import * as Vue from "vue";
import { loadModule } from "vue3-sfc-loader";
const previewComp = shallowRef();
const init= () => {
try {
const options = {
moduleCache: {
vue: Vue
},
async getFile(url) {
const res = await fetch(url);
if ( !res.ok )
throw Object.assign(new Error(url+' '+res.statusText), { res });
return await res.text();
},
addStyle(textContent) {
const style = Object.assign(document.createElement("style"), {
textContent
});
const ref = document.head.getElementsByTagName("style")[0] || null;
document.head.insertBefore(style, ref);
}
};
const comp = defineAsyncComponent(() =>
loadModule("/myComponent.vue", options)
);
console.log(comp);
previewComp.value = comp;
} catch (err) {
console.error(err);
}
};
init();
</script>
使用sfc文件类型的字符串模版
<template>
<component :is="previewComp"></component>
</template>
<script setup>
import { defineAsyncComponent, shallowRef} from "vue";
import * as Vue from "vue";
import { loadModule } from "vue3-sfc-loader";
const code = ref(`
<template>
<span class="example">{{ msg }}</span>
</template>
<script>
export default {
data () {
return {
msg: 'world!'
}
}
}
<\/script>
<style scoped>
.example {
color: red;
}
</style>
`)
const previewComp = shallowRef();
const init= () => {
try {
const options = {
moduleCache: {
vue: Vue
},
async getFile() {
return code.value
},
addStyle(textContent) {
const style = Object.assign(document.createElement("style"), {
textContent
});
const ref = document.head.getElementsByTagName("style")[0] || null;
document.head.insertBefore(style, ref);
}
};
const comp = defineAsyncComponent(() =>
loadModule("myComponent.vue", options)
);
console.log(comp);
previewComp.value = comp;
} catch (err) {
console.error(err);
}
};
init();
</script>
