You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.9 KiB
65 lines
1.9 KiB
<template> |
|
<PageWrapper title="ACE基础使用" |
|
contentFullHeight |
|
fixedHeight |
|
contentBackground |
|
> |
|
<template #extra> |
|
<a-space size="middle"> |
|
语言<a-select v-model:value="state.lang"> |
|
<a-select-option v-for="(lang, index) of langs" :key="index" :value="lang"> {{ lang }} </a-select-option> |
|
</a-select> |
|
主题<a-select v-model:value="state.theme"> |
|
<a-select-option v-for="(theme, index) of themes" :key="index" :value="theme"> {{ theme }} </a-select-option> |
|
</a-select> |
|
</a-space> |
|
</template> |
|
<AceEditor v-model:value="state.content" |
|
class="vue-ace-editor" |
|
:lang="state.lang" |
|
:theme="state.theme" |
|
:options="{ |
|
useWorker: true, |
|
enableBasicAutocompletion: true, |
|
enableSnippets: true, |
|
enableLiveAutocompletion: true, |
|
}" |
|
/> |
|
</PageWrapper> |
|
</template> |
|
<script setup lang="ts"> |
|
import { reactive, watch } from 'vue'; |
|
import { AceEditor } from '/@/components/AceEditor'; |
|
import { PageWrapper } from '/@/components/Page'; |
|
|
|
const langs = ['json', 'javascript', 'html', 'yaml']; |
|
const themes = ['chrome', 'github', 'monokai', 'dracula']; |
|
const state = reactive({ |
|
lang: 'json', |
|
theme: 'chrome', |
|
content: '', |
|
}); |
|
|
|
watch( |
|
() => state.lang, |
|
async lang => { |
|
state.content = ( |
|
await { |
|
json: import('../../../../../package.json?raw'), |
|
javascript: import('/@/components/AceEditor/src/ace-config.js?raw'), |
|
html: import('../../../../../index.html?raw'), |
|
yaml: import('../../../../../pnpm-lock.yaml?raw'), |
|
}[lang] |
|
|| {}).default!; |
|
}, |
|
{ immediate: true } |
|
); |
|
</script> |
|
<style lang="less" scoped> |
|
|
|
.vue-ace-editor { |
|
font-size: 12px; |
|
} |
|
|
|
</style> |
|
|
|
|