dubbo-admin-ui/src/components/public/JsonEditor2.vue

<!--
  - Licensed to the Apache Software Foundation (ASF) under one or more
  - contributor license agreements.  See the NOTICE file distributed with
  - this work for additional information regarding copyright ownership.
  - The ASF licenses this file to You under the Apache License, Version 2.0
  - (the "License"); you may not use this file except in compliance with
  - the License.  You may obtain a copy of the License at
  -
  -   http://www.apache.org/licenses/LICENSE-2.0
  -
  - Unless required by applicable law or agreed to in writing, software
  - distributed under the License is distributed on an "AS IS" BASIS,
  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  - See the License for the specific language governing permissions and
  - limitations under the License.
  -->
<template>
    <div ref="jsoneditor">
    </div>
</template>

<script>
import JSONEditor from 'jsoneditor/dist/jsoneditor-minimalist.js'
import 'jsoneditor/dist/jsoneditor.min.css'
import _ from 'lodash'
export default {
  name: 'json-editor2',
  data () {
    return {
      editor: null,
      maxed: false,
      jsoneditorModes: null
    }
  },
  props: {
    json: {
      required: true
    },
    options: {
      type: Object,
      default: () => {
        return {}
      }
    },
    onChange: {
      type: Function
    }
  },
  watch: {
    json: {
      handler (newJson) {
        if (this.editor) {
          this.editor.set(newJson)
        }
      },
      deep: true
    }
  },
  methods: {
    _onChange (e) {
      if (this.onChange && this.editor) {
        this.onChange(this.editor.get())
      }
    },
    _onModeChange (newMode, oldMode) {
      const container = this.$refs.jsoneditor
      if (container.getElementsByClassName('jsoneditor-modes') && container.getElementsByClassName('jsoneditor-modes')[0]) {
        this.jsoneditorModes = container.getElementsByClassName('jsoneditor-modes')[0]
      }
      if (newMode === 'code') {
        this.addMaxBtn()
      }
    },
    addMaxBtn () {
      const container = this.$refs.jsoneditor
      var jsoneditorMunusDiv = container.getElementsByClassName('jsoneditor-menu')[0]
      var maxBtn = document.createElement('button')
      maxBtn.type = 'button'
      maxBtn.classList.add('jsoneditor-max-btn')
      maxBtn.jsoneditor = {}
      maxBtn.jsoneditor.maxed = this.maxed
      maxBtn.jsoneditor.editor = this.$refs.jsoneditor
      var _this = this
      maxBtn.onclick = function () {
        if (this.jsoneditor.maxed) {
          if (!container.getElementsByClassName('jsoneditor-modes')[0]) {
            maxBtn.before(_this.jsoneditorModes)
          }
          this.jsoneditor.editor.classList.remove('jsoneditor-max')
          this.jsoneditor.maxed = false
        } else {
          if (container.getElementsByClassName('jsoneditor-modes') && container.getElementsByClassName('jsoneditor-modes')[0]) {
            container.getElementsByClassName('jsoneditor-modes')[0].remove()
          }
          this.jsoneditor.editor.classList.add('jsoneditor-max')
          this.jsoneditor.maxed = true
        }
      }
      jsoneditorMunusDiv.appendChild(maxBtn)
    }
  },
  mounted () {
    const container = this.$refs.jsoneditor
    const options = _.extend({
      onChange: this._onChange,
      onModeChange: this._onModeChange
    }, this.options)
    this.editor = new JSONEditor(container, options)
    this.editor.set(this.json)

    if (container.getElementsByClassName('jsoneditor-modes') && container.getElementsByClassName('jsoneditor-modes')[0]) {
      this.jsoneditorModes = container.getElementsByClassName('jsoneditor-modes')[0]
    }
  },
  beforeDestroy () {
    if (this.editor) {
      this.editor.destroy()
      this.editor = null
    }
  }
}
</script>

<style>

.jsoneditor-max-btn {
  position: absolute;
  top: 6px;
  width: 18px !important;
  height: 18px !important;
  background: rgba(0, 0, 0, 0) url(./assets/max_btn.svg) no-repeat !important;
  background-position: 3px;
}

.jsoneditor-max {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100% !important;
  z-index: 10000;
}

</style>