写段vue代码使用codemirror插件实现,点击按钮时,格式化代码
时间: 2023-05-20 14:07:02 浏览: 86
非常感谢您的提问!以下是使用 Codemirror 插件实现点击按钮格式化代码的 Vue 代码示例:
<template>
<div>
<textarea ref="editor" v-model="code"></textarea>
<button @click="formatCode">格式化代码</button>
</div>
</template>
<script>
import CodeMirror from 'codemirror'
import 'codemirror/mode/javascript/javascript'
export default {
data() {
return {
code: ''
}
},
mounted() {
this.editor = CodeMirror.fromTextArea(this.$refs.editor, {
mode: 'javascript',
lineNumbers: true
})
},
methods: {
formatCode() {
const unformattedCode = this.editor.getValue()
const formattedCode = js_beautify(unformattedCode, { indent_size: 2 })
this.editor.setValue(formattedCode)
}
}
}
</script>
在这个示例中,我们首先引入了 Codemirror 插件,并在 mounted 钩子函数中初始化了一个 CodeMirror 实例。然后,我们在模板中使用了一个 textarea 元素来绑定代码的输入和输出,并添加了一个按钮来触发格式化代码的方法。在 formatCode 方法中,我们首先获取当前编辑器中的未格式化代码,然后使用 js_beautify 函数将其格式化,最后将格式化后的代码设置回编辑器中。