dzhh-frontend/.svn/pristine/96/9654750f3e73e702738e4262b3e49f0cddaca8a7.svn-base

<template>
  <div v-bind="fullScreenParentProps">
    <codemirror
      :style="style_"
      ref="myEditor"
      :options="getOptions"
      :value="getValue"
      @input="editroChange"
    ></codemirror>
    <a-icon :type="iconType" @click="()=>fullCoder=!fullCoder" class="full-screen-icon" />
  </div>
</template>

<script>

import { codemirror } from 'vue-codemirror-lite'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/vue/vue.js'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
import 'codemirror/addon/display/fullscreen.js'
import 'codemirror/theme/panda-syntax.css'

export default {
  name: 'CodeMirrorLite',
  components: {
    codemirror
  },
  props: {
    // 外部传入的内容，用于实现双向绑定
    value: {
      type: String,
      default: ''
    },
    // 外部传入的语法类型
    mode: {
      type: String,
      default: null
    },
    languageChange: {
      type: Boolean,
      default: false,
      required: false
    },
    placeholder: {
      type: String,
      default: null
    },
    // 显示行号
    lineNumbers: {
      type: Boolean,
      default: true
    },
    // 是否显示全屏按钮
    fullScreen: {
      type: Boolean,
      default: false
    },
    // 全屏以后的z-index
    zIndex: {
      type: [Number, String],
      default: 999
    },
    style_: { // codeMirror样式  如果需要设置样式  height是必填
      type: String,
      default: 'height:150px;'
    }
  },
  data() {
    return {
      // 默认配置
      options: {
        mode: 'javascript',
        // 缩进格式
        tabSize: 2,
        // 主题，对应主题库 JS 需要提前引入
        theme: 'panda-syntax',
        line: true,
        hintOptions: {
          tables: {
            users: ['name', 'score', 'birthDate'],
            countries: ['name', 'population', 'size']
          }
        }
      },
      iconType: 'fullscreen',
      // code 编辑器 是否全屏
      fullCoder: false
    }
  },
  watch: {
    fullCoder: {
      handler(value) {
        if (value) {
          this.iconType = 'fullscreen-exit'
        } else {
          this.iconType = 'fullscreen'
        }
      }
    }
  },
  computed: {
    getOptions() {
      if (this.mode) {
        this.options.mode = this.mode
      }
      this.options.lineNumbers = this.lineNumbers
      this.options.fullScreen = this.fullScreen
      return this.options
    },
    editor() {
      return this.$refs.myEditor.editor
    },
    getValue() {
      return this.value ? this.value : ''
    },
    fullScreenParentProps() {
      const props = {
        class: ['full-screen-parent', this.fullCoder ? 'full-screen' : ''],
        style: {}
      }
      if (this.fullCoder) {
        props.style['z-index'] = this.zIndex
      }
      return props
    }
  },
  mounted() {

  },
  methods: {
    editroChange() {
      this.$emit('input', this.$refs.myEditor.editor.getValue())
    }
  }
}
</script>
<style lang="less">
  .CodeMirror {
    min-height: 120px;
    height: 100%;
  }
  .CodeMirror-fullscreen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    height: auto;
    z-index: 9;
  }
  /* 全屏样式 */
  .full-screen-parent {
    position: relative;

    .full-screen-icon {
      opacity: 0;
      color: black;
      width: 20px;
      height: 20px;
      line-height: 24px;
      background-color: white;
      position: absolute;
      top: 2px;
      right: 2px;
      z-index: 9;
      cursor: pointer;
      transition: opacity 0.3s;
    }

    &:hover {
      .full-screen-icon {
        opacity: 1;

        &:hover {
          background-color: rgba(255, 255, 255, 0.88);
        }
      }
    }

    &.full-screen {
      position: fixed;
      top: 10px;
      left: 10px;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      padding: 10px;
      background-color: #f5f5f5;

      .full-screen-icon {
        top: 12px;
        right: 12px;
      }
      .full-screen-child {
        height: 100%;
        max-height: 100%;
        min-height: 100%;
      }
      .vue-codemirror-wrap,.cm-s-panda-syntax{
        height: 100% !important;
      }
    }

    .full-screen-child {
      min-height: 120px;
      max-height: 320px;
      overflow:hidden;
    }

  }
</style>