vue Monaco-Editor 设置列号显示
时间: 2023-12-16 14:06:36 浏览: 39
要在 Vue Monaco-Editor 中设置列号显示,可以通过以下步骤实现:
1. 首先,在 Vue 组件中引入 Monaco-Editor 组件,例如:
```
<template>
<div>
<monaco-editor :options="editorOptions" />
</div>
</template>
<script>
import MonacoEditor from 'vue-monaco'
import 'monaco-editor/esm/vs/editor/editor.all.js'
export default {
components: {
MonacoEditor
},
data() {
return {
editorOptions: {
language: 'javascript',
theme: 'vs-dark',
automaticLayout: true
}
}
}
}
</script>
```
2. 在 `editorOptions` 对象中添加 `glyphMargin` 属性,将其设置为 `true`,例如:
```
data() {
return {
editorOptions: {
language: 'javascript',
theme: 'vs-dark',
automaticLayout: true,
glyphMargin: true
}
}
}
```
3. 在 CSS 样式表中添加以下样式:
```
.monaco-editor .margin {
width: 40px;
}
```
这将使列号显示在编辑器的左侧边栏中。你可以通过修改 `.monaco-editor .margin` 的宽度来调整列号的显示位置。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)