vue在线代码编辑运行模块示例代码

木卯彳亍

已于 2022-12-05 17:27:17 修改

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

于 2022-11-18 11:48:23 首次发布

本文链接：https://blog.csdn.net/qq_40020291/article/details/127919585

本文介绍了一种利用CodeMirror和挂载技术实现的在线代码编辑和运行方案。该方案允许用户直接在网页中编写和运行代码示例，如ECharts柱状图和Element UI表格组件等，无需在本地Vue项目中进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个实现主要用到了codemirror和挂载，后面再出一篇来介绍实现过程。现在可以把下面的代码粘贴到代码框里，运行看下效果，自己写也可以。这样在实现一些方法的demo时，就不用在vue项目里写代码运行了，直接在这里面写代码运行就可以了（例如示例代码里的echart柱状图和element的table），好像有点鸡肋。
代码SVN地址（用户名：liu 密码：123）
在这里插入图片描述


      <!--示例代码-->
      <template>
        <div >
          <!-- 柱状图 -->
          <div id="chartmainbar" style="width: 600px; height: 250px"></div>
          <!--element表格-->
          <span style="font-size:20px;font-weight:bold;">element表格</span>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
          </el-table>
        </div>
      </template>
      <script>
      export default {
        data() {
          return {
            optionbar: {
              title: {
                text: "ECharts 数据统计",
              },
              tooltip: {},
              legend: {
                data: ["用户来源"],
              },
              xAxis: {
                data: ["Android", "IOS", "PC", "Ohter"],
              },
              yAxis: {},
              series: [
                {
                  name: "访问量",
                  type: "bar", //设置图表主题
                  data: [500, 200, 360, 100],
                },
              ],
            },
            tableData: [{
                  date: '2016-05-02',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1518 弄'
                }, {
                  date: '2016-05-04',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1517 弄'
                }, {
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄'
                }, {
                  date: '2016-05-03',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1516 弄'
                }]
          };
        },
        created(){
        },
        mounted() {
      this.$nextTick(() => {
           this.draw();
      });  
        },
        methods: {
          draw: function () {
            let chartmainbar = this.$echarts.init(
              document.getElementById("chartmainbar")
            );
            //绘制图表
            chartmainbar.setOption(this.optionbar);
          },
        },
      };
      </script>