VUE中展示代碼

CodeMirror

CodeMirror是一款在線代碼編輯器，本篇文章只記錄展示代碼，無在線編輯模塊

安裝

npm install vue-codemirror --save

main.js引入

import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/dracula.css' //主題

• 如下所示，安裝codemirror后，在node_modules\codemirror\theme目錄下有許多css主題，挑選中意的即可
  

組件封裝

<template>
  <codemirror
          ref="codeMirros"
          :value="value"
          :options="codeMirrosOptions"
          class="code">
  </codemirror>
</template>

<script>
  import { codemirror } from 'vue-codemirror'
  require("codemirror/mode/python/python.js")
  require('codemirror/addon/fold/foldcode.js')
  require('codemirror/addon/fold/foldgutter.js')
  require('codemirror/addon/fold/brace-fold.js')
  require('codemirror/addon/fold/xml-fold.js')
  require('codemirror/addon/fold/indent-fold.js')
  require('codemirror/addon/fold/markdown-fold.js')
  require('codemirror/addon/fold/comment-fold.js')

  export default {
    name: "codeMirros",
    components: {
      codemirror
    },
    props: {
      value:{
        type: String,
        required: true,
        default: '',
      }
    },
    data() {
      return {
        codeMirrosOptions:{
          value:'',
          theme:'darcula', //主題
          indentUnit:2,
          smartIndent:true,
          tabSize:4,
          readOnly:true, //只讀
          showCursorWhenSelecting:true,
          lineNumbers:false, //是否顯示行數
          firstLineNumber:1
        },
        resArr: '',
      };
    },
    mounted() {

    },
    methods: {

    }
  };
</script>

組件引用

<template>
    <div ref="oneLineMain" style="text-align:center;font-size:14px;width:100%;height:290px;">
	</div>
	<div @click="showOneLineCode" style="color: #66b1ff;font-size: 14px;cursor: pointer;margin-bottom: 20px;">{{ oneLineLabel }}</div>
	<div v-if="oneLineMainCodeVisible" style="text-align: left;margin-bottom: 20px;">
		<CodeMirrors
				ref="oneLineCodeMirrors"
				:value="oneLineMainCode">
		</CodeMirrors>
	</div>
</template>
<script>
    import CodeMirrors from '@/components/CodeMirros';

    export default {
      name: "lineEcharts",
      components: {
        CodeMirrors
      },
      data() {
        return {
            oneLineMainCodeVisible: false,
            oneLineLabel: '顯示代碼',
            oneLineMainCode: '<div ref="oneLineMain" style="text-align:center;font-size:14px;width:100%;height:290px;"></div>\n' +
                '        \n' +
                'var oneMyChart = this.$echarts.init(this.$refs.oneLineMain);\n' +
                '\n' +
                '// 繪制圖表\n' +
                'oneMyChart.setOption({\n' +
                '   xAxis: {\n' +
                '      type: \'category\',\n' +
                '      data: [\'Mon\', \'Tue\', \'Wed\', \'Thu\', \'Fri\', \'Sat\', \'Sun\']\n' +
                '   },\n' +
                '   yAxis: {\n' +
                '      type: \'value\'\n' +
                '   },\n' +
                '   series: [{\n' +
                '      data: [820, 932, 901, 934, 1290, 1330, 1320],\n' +
                '      type: \'line\'\n' +
                '   }]\n' +
                ');',
        }
      },
      mounted() {
          //基於准備好的dom，初始化echarts實例
          var oneMyChart = this.$echarts.init(this.$refs.oneLineMain);

          // 繪制圖表
          oneMyChart.setOption({
              xAxis: {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                  type: 'value'
              },
              series: [{
                  data: [820, 932, 901, 934, 1290, 1330, 1320],
                  type: 'line'
              }]
          });
      },
      methods:{
          showOneLineCode(){
              this.oneLineMainCodeVisible = !this.oneLineMainCodeVisible;
              if(this.oneLineLabel === "顯示代碼"){
                  this.oneLineLabel = "隱藏代碼";
              }else this.oneLineLabel = "顯示代碼";
          }
      },
    }
</script>

效果圖

• 注意：在使用時想要高度自適應，需要修改codemirror/lib/codemirror.css文件中的樣式為高度自適應

.CodeMirror {
  position: relative;
  overflow: hidden;
  background: white;
}

.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */
  /* 30px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -30px; margin-right: -30px;
  padding-bottom: 30px;
  height: auto;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
}

.end