monaco editor 高亮碰到的问题

使用  monaco editor 做一个简单的指定字符高亮功能：

<template>

  <div id="container" :style="{ zIndex, width }">

  </div>

</template>

<script>

export default {

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

mounted() {     this.$nextTick(() => this.init()} }, methods: {     init() {          const muri = monaco.Uri.parse('file', + 'rance/abl.c')            let model = monaco.editor.getModel(muri)           if(!model){             model = monaco.editor.createModel(this.value, 'cpp', muri)          }             this.editor = monaco.editor.create(this.$refs.editor,             {                 value: this.value,                 theme: 'vs',                 language: 'c' ,                 automoaticLayout: true,                 readOnly: true,                 mimimap: { enabled: false}             }              this.update()         },         update() {             const model = this.editor.getModel()              model.deltaDecorations(this.model, [])                if(model) {                 let matches = model.findMoatches('int', true, false, true)                 this.decorations = matches.map((match) => (                     {                      range: new monaco.Range(match.range.startLineNumber, match.range.startColumn, match.range.endLineNumber,match.range.endColumn),                      options: { isWholeLine: false, className: 'high'}                     }))                     this.model = model.deltaDecorations([], this.decorations)<br>               }<br>        }<br>}<br><br>

};

</script>

<style scoped>

这里一定要注意类名权重，不加入可能会使用官方自带高亮类名样式背景，再次刷新界面会使得代码不渲染高亮背景色，.high不生效。

#containr .high {

background: red;

}

</style>