组件封装使用，vue 实现json 编辑器

• Z时代
• 2024-01-10
• 分类：综合

依赖：

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 实现json 编辑器 的全部内容， 来源链接： utcz.com/z/376574.html