zoukankan      html  css  js  c++  java
  • 在vue里使用codemirror的两种用法

    第一种用法:
    1、安装:npm install vue-codemirror --save
    2、在main.js中引入
    
    import VueCodeMirror from 'vue-codemirror'
    import 'codemirror/lib/codemirror.css'
    Vue.use(VueCodeMirror)
    3、在组件中使用
    
    import { codemirror } from 'vue-codemirror'
    import "codemirror/theme/ambiance.css";  // 这里引入的是主题样式,根据设置的theme的主题引入,一定要引入!!
    require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js,根据设置的mode引入,一定要引入!!
    在组件中声明:
    
    components:{
          codemirror
     },
    html代码写法:
    
    <codemirror
          ref="mycode"
          :value="curCode"
          :options="cmOptions"
          class="code">
     </codemirror>
    data中cmOptions的配置,这里我写的比较简单,具体的配置项,可以去查官方文档
    
    curCode:'',
    cmOptions:{
        value:'',
         mode:"text/javascript",
        theme: "ambiance",
        readOnly:true,
     }
    第二种用法:
    第1步、第2步和第一种用法中的相同
    3、在组件中使用
    
    import CodeMirror from 'codemirror/lib/codemirror'
      import "codemirror/theme/ambiance.css";
      require("codemirror/mode/javascript/javascript");
    在组件中写法,要写在 mounted中:
    
     mounted(){
          this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
          mode:"text/javascript",
          theme: "ambiance",
          readOnly:true,
    },
    html代码写法:
    
    <textarea ref="mycode" class="codesql public_text" v-model="code"></textarea>
    在切换改变值的方法,需要用到setValue方法,而在第一种方式中直接改变v-model绑定的值就可以了
    
    changeCode(value){
      this.code = value;        
      this.editor.setValue(this.code);
    }
    

      

    .CodeMirror {
    border: 1px solid #eee;
    height: auto;
    }

    .CodeMirror-scroll {
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
    }

  • 相关阅读:
    面试题 08.02. 迷路的机器人(C++)
    URI和URL的区别
    Kali Linux自定义分辨率设置
    CentOS最小化安装后配置NAT网络模式
    CentOS7.5安装及最小安装后联网配置--联网配置
    CentOS7.5安装及最小安装后联网配置--系统安装
    基数排序
    归并排序
    堆排序
    简单选择排序
  • 原文地址:https://www.cnblogs.com/matd/p/11586013.html
Copyright © 2011-2022 走看看