0.1.0 • Published 10 months ago

vue-run-demo v0.1.0

Weekly downloads
-
License
MIT
Repository
-
Last release
10 months ago

vue-run-sfc | Vue DEMO 利器, 在线运行 & 编辑 Vue 单文件

特性

  • 在线预览和编辑 Vue 单文件
  • 错误提示
  • 全屏模式

image

生态

安装

yarn add vue-run-sfc # npm install vue-run-sfc --save

使用

全局注册

import VueRunSfc from "vue-run-sfc";

Vue.use(VueRunSfc, {
  // 全局配置(非必填),  具体属性含义参考 `props` 说明
  // 注意 全局的 和 局部的 `cssLabs` 和 `jsLabs` 是 merge的关系, 不是替换
  cssLabs: ["https://unpkg.com/normalize.css@8.0.1/normalize.css"],
  jsLabs: ["https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/index.js"],
  row: true,
  reverse: true,
  height: "400px",
  open: true,
  isHideHeader: false,
  themeColor: "green"
});

局部注册

<script>
  import { VueRunSfc } from "vue-run-sfc";

  export default {
    components: { VueRunSfc }
  };
</script>

示例

<template>
  <vue-run-sfc
    :js-labs="jsLabs"
    :css-labs="cssLabs"
    title="测试DEMO"
    :open="true"
    :code="code"
  ></vue-run-sfc>
</template>

<script>
  export default {
    data() {
      return {
        jsLabs: ["https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/index.js"],
        cssLabs: [
          "https://cdn.jsdelivr.net/npm/element-ui@2.12.0/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>
  body {color: #409EFF;}
</style>`
      };
    }
  };
</script>

props 属性说明

props: {
  /**
   * 代码
   * @example: '<template><div>123</div></template>'
   */
  code: String,

  /**
   * js 库
   * @example: ['https://unpkg.com/element-ui/lib/index.js']
   */
  jsLabs: [String, Array],

  /**
   * css 库
   * @example: ['https://unpkg.com/element-ui/lib/theme-chalk/index.css']
   */
  cssLabs: [String, Array],

  /**
   * js 字符串
   * @example: 'alert(1)'
   */
  js: [Array, String],

  /**
   * css 字符串
   * @example: 'body { color: red }'
   */
  css: [Array, String],

  /**
   * 主体色
   * 默认值: #409eff
   */
  themeColor: {
    type: String,
    default: '#409eff'
  },

  /**
   * 边框色
   * 默认值: #eaeefb
   */
  themeBorderColor: {
    type: String,
    default: '#eaeefb'
  },

  /**
   * 代码编辑器和效果预览排列方式
   * 当为 false 时, 上下排列
   * 当为 true 时, 左右排列
   */
  row: Boolean,

  /**
   * 当 `row` 为 true 时, 编辑区和展示区上下位置
   * 当为 false 时, 编辑器在下, 展示区在上
   * 当为 true 时, 编辑器在上, 展示区在下
   */
  reverse: Boolean,

  /**
   * 标题
   * @example: '测试demo'
   */
  title: String,

  /**
   * 高度
   * @example: '400px'
   */
  height: String,

  /**
   * 初始加载是否打开编辑区
   * 当为 false 时, 默认是关闭编辑区
   * 当为 true 时, 默认是打开编辑区
   */
  open: Boolean,

  /**
   * 是否隐藏头部
   */
  isHideHeader: Boolean
}

相关链接

0.0.40

10 months ago

0.0.39

10 months ago

0.1.0

10 months ago

0.0.38

2 years ago

0.0.37

2 years ago

0.0.20

3 years ago

0.0.21

3 years ago

0.0.22

3 years ago

0.0.23

3 years ago

0.0.24

3 years ago

0.0.25

3 years ago

0.0.30

3 years ago

0.0.31

3 years ago

0.0.32

3 years ago

0.0.33

3 years ago

0.0.34

3 years ago

0.0.35

3 years ago

0.0.36

3 years ago

0.0.26

3 years ago

0.0.27

3 years ago

0.0.28

3 years ago

0.0.29

3 years ago

0.0.16

3 years ago

0.0.17

3 years ago

0.0.18

3 years ago

0.0.19

3 years ago

0.0.14

3 years ago

0.0.15

3 years ago

0.0.10

3 years ago

0.0.11

3 years ago

0.0.12

3 years ago

0.0.13

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.1

3 years ago