126 lines
3.3 KiB
Vue
126 lines
3.3 KiB
Vue
<template>
|
||
<div>
|
||
<editor
|
||
:value="content"
|
||
@input="handleInput"
|
||
@init="editorInit"
|
||
:lang="aceConfig.selectLang"
|
||
:theme="aceConfig.selectTheme"
|
||
:options="aceConfig.options"
|
||
width="100%"
|
||
height="400px"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 编辑器主题
|
||
const themes = [
|
||
'xcode',
|
||
'eclipse',
|
||
'monokai',
|
||
'cobalt'
|
||
]
|
||
// 编辑器语言
|
||
const langs = [
|
||
'c_cpp',
|
||
'java',
|
||
'javascript',
|
||
'golang'
|
||
]
|
||
// tabs
|
||
const tabs = [2, 4, 8]
|
||
// 字体大小
|
||
const fontSizes = [14, 15, 16, 17, 18, 19, 20, 21, 22]
|
||
// 编辑器选项
|
||
const options = {
|
||
tabSize: 4, // tab默认大小
|
||
showPrintMargin: false, // 去除编辑器里的竖线
|
||
fontSize: 20, // 字体大小
|
||
highlightActiveLine: true, // 高亮配置
|
||
enableBasicAutocompletion: true, //启用基本自动完成
|
||
enableSnippets: true, // 启用代码段
|
||
enableLiveAutocompletion: true, // 启用实时自动完成
|
||
}
|
||
export default {
|
||
name: "CodeEdit",
|
||
components: {
|
||
editor: require('vue2-ace-editor'),
|
||
},
|
||
data() {
|
||
return {
|
||
visible: false, // 模态窗口显示控制
|
||
aceConfig: { // 代码块配置
|
||
langs, // 语言
|
||
themes, // 主题
|
||
tabs, // tab空格
|
||
fontSizes,
|
||
options, // 编辑器属性设置
|
||
selectTheme: 'xcode', // 默认选择的主题
|
||
selectLang: 'c_cpp', // 默认选择的语言
|
||
readOnly: false, // 是否只读
|
||
},
|
||
}
|
||
},
|
||
// 接收父组件v-model传来的值
|
||
model: {
|
||
prop: 'content',
|
||
event: 'change'
|
||
},
|
||
props: {
|
||
content: String // content就是上面prop中声明的值，要保持一致
|
||
},
|
||
methods: {
|
||
// 当该组件中的值改变时，通过该方法将该组件值传给父组件，实现组件间双向绑定
|
||
handleInput(e) {
|
||
this.$emit('change', e) // 这里e是每次子组件修改的值，change就是上面event中声明的，不要变
|
||
},
|
||
// 显示'编辑器设置'模态窗口
|
||
showSettingModal() {
|
||
this.visible = true
|
||
},
|
||
// '编辑器设置'模态窗口确认按钮回调
|
||
handleOk() {
|
||
this.visible = false
|
||
// this.editorInit()
|
||
},
|
||
// 代码块主题切换
|
||
handleThemeChange(value) {
|
||
this.aceConfig.selectTheme = value
|
||
this.editorInit()
|
||
},
|
||
// 代码块语言切换
|
||
handleLangChange(value) {
|
||
this.aceConfig.selectLang = value
|
||
this.editorInit()
|
||
},
|
||
// tab切换
|
||
handleTabChange(value) {
|
||
this.aceConfig.options.tabSize = value
|
||
this.editorInit()
|
||
},
|
||
// 字体大小切换
|
||
handleFontChange(value) {
|
||
this.aceConfig.options.tabSize = value
|
||
this.editorInit()
|
||
},
|
||
// 代码块初始化
|
||
editorInit () {
|
||
require('brace/ext/language_tools') // language extension prerequsite...
|
||
require(`brace/mode/${this.aceConfig.selectLang}`) // 语言
|
||
require(`brace/theme/${this.aceConfig.selectTheme}`) // 主题
|
||
},
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.settingTitle{
|
||
font-size: larger;
|
||
}
|
||
.settingDescription{
|
||
font-size: small;
|
||
color: #a8a8af
|
||
}
|
||
</style>
|
||
|