vue-run-online

vue-run-online 是一款能够在线编辑/预览代码效果的vue组件

前置说明

vue-run-online 是基于vue-fun-sfc组件进行自定义改造，在原来基础上增加了一些属性和可自定义配置项目,主要是为了配置自己自定义组件库而进行改造，非商业用途～

使用说明

安装

npm install vue-run-online

使用

• 全局使用

import VueRunOnline from "vue-run-online";
 
Vue.use(VueRunOnline, { 
  cssLabs: ["https://unpkg.com/[email protected]/normalize.css"],
  jsLabs: ["https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"], 
});

• 局部使用

<script>
  import { VueRunOnline } from "vue-run-online";
 
  export default {
    components: { VueRunOnline }
  };
</script> 

传入说明

props

属性 | 类型 |默认值|属性描述|可选值 ---|---|---|---|--- code | string | '' | 传入的需要进行demo演示的代码 jsLabs | Array｜String | ' ' | code执行所需要js资源 cssLabs | Array｜String | ' ' | code执行所需要css canEdit| Boolean | true |是否可以编辑代码区域 comDesc|String |''|组件说明 展示在头部下面 hideAllBtn｜Boolean| false| 隐藏头部所有按钮 hideButtons|Array|[]|隐藏头部三个按钮组|['reset','full','layout'] hideRight|Boolean ｜false ｜隐藏右下角内容配置 rightLink|String|' '|右下角链接配置 rightText|String|' '|右下角链接文字配置 vueUrl|string|''|引入的Vue的版本,解决版本不同的问题 默认是https://cdn.jsdelivr.net/npm/[email protected] js | Array｜String | ' ' | code执行所需要css css | Array｜String | ' ' | code执行所需要css themeColor | String | '#409eff' | 代码演示主题效果颜色 themeBorderColor | String |'#eaeefb' | 代码演示主题边框色 row | Boolean |false | 代码和演示效果的排列效果 true 左右排列 false上下排列 | reverse | Boolean | false | 代码和演示效果上下排列时候 代码区和编辑区上下位置 false 编辑器在下, 展示区在上 true 编辑器在上, 展示区在 下 | title | String | '' | 代码展示标题名称 | height | String | '' | 代码展示高度 | open | Boolean | true | 是否自动打开编辑区域 | isHideHeader | Boolean | false | 是否隐藏头部 |

slots

提供了三个可以插槽功能

插槽名称 |描述 ---|--- header | 头部插槽位置 页面头部中间部分 当hideAllBtn==true时，将会展示在右侧 desc | 组件说明部分 和comDesc字段渲染在一个位置 footer | 底部右下角说明部分 和其他的配置项目一起展示

demo示例

基本正常使用 可编辑状态

  <vue-run-online
          :js-labs="jsLabs"
        :css-labs="cssLabs"
        title="测试DEMO"
        :open="true"
        :code="code"
      >
      <div slot='header'>我是标题呀</div>
      <div slot="footer">我是底部的标签呀</div> 
      </vue-run-online>
<script>
 data() {
    return {
      exampleCode: exampleCode,
      codemirrorOption: codemirrorOption,
      jsLabs: ["https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"],
      cssLabs: [
        "https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css"
      ],
      code: `<template>
  <div>
    <h1>{{title}}</h1>
    <div><el-button type="primary" @click="handleClick">可以进行操作</el-button></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: "我是按钮"
      };
    },
    methods: {
      handleClick () {
        this.$message.success('')
      }
    }
  };
<\/script>

<style lang="scss">
  body {
    #box {
      color: #409EFF;
    }
  }
</style>`
    };
  }
</script>

预览demo

 <vue-run-online
        :hideButtons="['reset']"
        :js-labs="jsLabs"
        :css-labs="cssLabs"
        :open="true"
        :canEdit="false"
        :code="code3"
      >
        <div slot="header">我是标题呀</div>
        <div slot="desc">我是组件说明嘻嘻</div>
        <div slot="footer">我是底部的标签呀</div>
      </vue-run-online>
    //code
       code3: `<template>
  <div>
   我是一个静态的可预览的文件呀
  </div>
</template>`,

参考地址

• vue-run-sfc
• 使用Vue-codemirror使用总结
• CodeMirror使用