github.com/easysoft/zendata@v0.0.0-20240513203326-705bd5a7fd67/ui/src/views/mock/components/Yaml.vue (about)

     1  <template>
     2    <div class="yaml-editor">
     3      <textarea ref="textarea"/>
     4    </div>
     5  </template>
     6  
     7  <script>
     8  import CodeMirror from 'codemirror'
     9  import 'codemirror/addon/lint/lint.css'
    10  import 'codemirror/lib/codemirror.css'
    11  import 'codemirror/mode/yaml/yaml'
    12  import 'codemirror/addon/lint/lint'
    13  import 'codemirror/addon/lint/yaml-lint'
    14  // 提示弹窗
    15  import 'codemirror/addon/dialog/dialog.js'
    16  import 'codemirror/addon/dialog/dialog.css'
    17  // 滚动条
    18  import 'codemirror/addon/scroll/simplescrollbars.css'
    19  import 'codemirror/addon/scroll/simplescrollbars.js'
    20  // 搜索功能
    21  import 'codemirror/addon/search/search.js'
    22  import 'codemirror/addon/search/searchcursor.js'
    23  import 'codemirror/addon/search/jump-to-line.js'
    24  // 代码高亮
    25  import "codemirror/addon/selection/active-line";
    26  
    27  window.jsyaml = require("js-yaml") // 引入js-yaml为codemirror提高语法检查核心支持
    28  
    29  export default {
    30    name: 'YamlEditor',
    31    props: ['value'],
    32    data() {
    33      return {
    34        yamlEditor: false
    35      }
    36    },
    37    watch: {
    38      value(val) {
    39        if(val == undefined){
    40          val = '';
    41        }
    42        const editorValue = this.yamlEditor.getValue()
    43        if (val !== editorValue) {
    44          this.yamlEditor.setValue(val)
    45        }
    46      }
    47    },
    48    mounted() {
    49      this.yamlEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
    50        lineNumbers: true, // 显示行号
    51        mode: 'text/x-yaml', // 语法model
    52        gutters: ['CodeMirror-lint-markers'],  // 语法检查器
    53        lint: true, // 开启语法检查
    54        indentUnit: 1,         // 缩进单位为2
    55        styleActiveLine: true, // 当前行背景高亮
    56        matchBrackets: true,   // 括号匹配
    57        lineWrapping: true,    // 自动换行
    58        tabSize: 2,
    59        smartIndent: true,
    60      })
    61  
    62      let val = this.value;
    63      if(this.value == undefined){
    64          val = '';
    65        }
    66      this.yamlEditor.setValue(val)
    67      this.yamlEditor.on('change', (cm) => {
    68        this.$emit('changed', cm.getValue())
    69        this.$emit('input', cm.getValue())
    70      })
    71    },
    72    methods: {
    73      getValue() {
    74        return this.yamlEditor.getValue()
    75      }
    76    }
    77  }
    78  </script>
    79  
    80  <style scoped>
    81  .yaml-editor {
    82    position: relative;
    83    height: 100%;
    84  }
    85  
    86  .yaml-editor >>> .CodeMirror {
    87    height: 100%;
    88    min-height: 300px;
    89  }
    90  
    91  .yaml-editor >>> .CodeMirror-scroll {
    92    min-height: 300px;
    93  }
    94  
    95  .yaml-editor >>> .cm-s-rubyblue span.cm-string {
    96    color: #F08047;
    97  }
    98  </style>