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