实现 vue 组件的实时修改实时运行

类似 ElementUi 文档的组件示例效果并可实时调试

安装

npm install vue-complier-template
npm install @vue/[email protected]

用法

// main.js
import Vue from "vue";
import { parse } from "@vue/compiler-sfc";
import vueComplierTemplate from "vue-complier-template";
Vue.use(vueComplierTemplate, {
  parseCode: parse,
  evalScript: (value) => window.eval(value),
});

vue.config.js

module.exports = {
  // 开启 runtime
  runtimeCompiler: true,
};

// example-source-code.js
export default `<script>
  export default {
    data() {
      return {
        tableData: Array(6).fill('').map((_, index) => ({
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519弄'
        }))
      }
    }
  }
</script>

<template>
  <el-table :data="tableData" border>
    <el-table-column prop="date" label="日期" width="180"/>
    <el-table-column prop="name" label="姓名" width="180"/>
    <el-table-column prop="address" label="地址" />
  </el-table>
</template>
`;

<!-- example.vue -->
<template>
  <div id="app">
    <vue-complier-template v-model="codeValue" />
    <textarea v-model="codeValue" />
  </div>
</template>

<script>
  import codeValue from "path/to/example-source-code.js";
  export default {
    name: "App",
    data: () => ({ codeValue }),
  };
</script>

Options

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------- | ----------------------------------------------------------- | ---------------------------------- | ------ | ------ | | value | value / v-model 绑定值 | string | - | - | | render | 接管组件内部 render | Function({ h, descriptor }) | - | - | | renderError | value 解析失败内容渲染函数 | Function({ h, error, descriptor }) | - | - | | renderEmpty | value 为空时内容渲染函数 | Function({ h, descriptor }) | - | - | | parseCode | 解析 vue 模板数据(必填) | Function(value) | - | - | | evalScript | 解析 script 字符串(必填) | Function(value) | - | - | | parseStyles | value 解析出的 style 标签内的内容, 抛出数据调用方自定义处理 | Function({ styles, vm }) | - | - |

codesandbox

Live Demo

在线体验