标签：vue lint 编辑器 codedata json import codemirror css addon

依赖：

npm  install  vue-codemirror

可能遇到错误

npm  install file 

npm  install system 

子组件封装

components.vue 

<template>
  
    <codemirror
            class="code-dec"
            ref="jsonEditor"
            v-model="jsondata"
            :options="options"
            style="height: 600px;"
            @input="changeCode"
          />
  
  
  </template>
  
  <script>
    import { codemirror } from 'vue-codemirror'
    import 'codemirror/lib/codemirror.css'
    import 'codemirror/mode/javascript/javascript' 
    import 'codemirror/addon/selection/active-line' 
    import 'codemirror/keymap/sublime' 
    import 'codemirror/mode/css/css'
    import 'codemirror/theme/monokai.css' 
    import 'codemirror/addon/lint/lint'
    import 'codemirror/addon/lint/lint.css'
    import 'codemirror/addon/lint/json-lint'
    import 'codemirror/addon/display/autorefresh'
  
  
    export default{
      props:{
        codedata:{
          type:String,
          required:true,
          default:'{}'
        }
      },
      components: {
        codemirror
      } ,
      data () {
        return {
         jsondata:this.codedata,
          options:{
            tabSize: 4,
            mode: 'application/json',
            theme: 'base16-dark',
            lineNumbers: true,
            line: true,
            lint: true, // 代码格式检查
            gutters: ['CodeMirror-lint-markers', 'CodeMirror-foldgutter'],
          }
        }
      },

      methods: {
        
        getCodeValue(){
          let  codedata =  this.$refs.jsonEditor.codemirror
          console.log(codedata)
        },
        changeCode(newdata){
          this.jsondata=newdata
          console.log(this.jsondata)
          // 子传消息告诉父亲，执行方法和参数
          this.$emit('changeparent',newdata);
        }
      },

  
    }
  
  
  </script>

  <style lang="less" scoped>
    * /deep/ .code-dec  { touch-action: none; }
  </style>

父组件中使用子组件：

<template>
  
  <code-editor :codedata="data" @changeparent="changeValue"></code-editor>



</template>

<script>

  import codeEditor from "@/components/codeEditor"

  export default{
    components: {
      codeEditor
    } ,
    data () {
      return {
        data:'{"11":222}'
      }
    },
    methods: {
      changeValue(value){
        this.codedata= value
        console.log(`父组件值: ${this.codedata}`)
      }

    },
    created () {
      
      this.data =JSON.stringify({"a1":111111})
     }

  }


</script>

标签：vue,lint,编辑器,codedata,json,import,codemirror,css,addon
来源： https://www.cnblogs.com/SunshineKimi/p/15212927.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。