Vue-demo-editor NPM

vue-demo-editor

项目功能 🔨

一个基于 vue-live 的 Vue 组件，用于实时编辑和演示组件。专为组件文档中轻松展示组件而设计。

特性

自定义布局和样式,针对组件演示进行了优化
增加切换显示源代码和复制代码按钮
支持浅色和深色主题
实时编辑组件演示代码
轻松配置组件依赖
复制成功回调函数
使用 PrismJS 进行语法高亮

安装使用步骤

安装

你可以使用 npm 或 yarn 来安装 vue-demo-editor:

npm install vue-demo-editor
# 或者
yarn add vue-demo-editor

使用

<template>
  <vue-demo-editor
    :code="demoCode" 
    :components="Components"
    theme="light"
    @success="onCopySuccess"
  />
</template>

<script>
import VueDemoEditor from 'vue-demo-editor'
import * as Components from "your-component-kit"

export default {
  components: {
    VueDemoEditor 
  },
  data() {
    return {
      demoCode: `
        <template>
          <button @click="count++">
            点击了 {{ count }} 次
          </button>
        </template>
        
        <script>
        export default {
          data() {
            return {
              count: 0
            }
          }
        }
        </script>
      `,
    }
  },
  methods: {
    onCopySuccess() {
      console.log('代码已复制到剪贴板')
    }
  }
}
</script>

属性

参数	说明	类型	必填项	默认值
theme	主题风格,`light` 或 `dark`	String	否	`light`
code	要展示的演示代码	String	是	-
components	演示需要注册的组件	Object	是	-
success	复制成功的回调函数	Function	是	-