VUE se muestra en el código

CodeMirror

CodeMirrorSe trata de un editor de código en línea, este artículo sólo se muestran los registros del código, no hay ningún módulo de edición en línea

instalar

npm install vue-codemirror --save

main.js introducido

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

• Como se muestra a continuación, instalar codemirrormás adelante, node_modules\codemirror\themehay muchos directorio de csstema, se puede elegir favorita
  

paquete de componentes

<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>

Referencia de los componentes

<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>

representaciones

• Nota: Si desea altamente adaptable en uso, la necesidad de modificar el codemirror/lib/codemirror.cssarchivo es de estilo altamente adaptable

.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;
}

.fin