https://github.com/dream2023/docsify-plugin-run

docsify 在线运行 Vue 单文件
https://github.com/dream2023/docsify-plugin-run

docsify docsify-demo docsify-editor docsify-plugin docsify-sfc docsify-vue vue-run-sfc

Last synced: 3 days ago
JSON representation

docsify 在线运行 Vue 单文件

• Host: GitHub
• URL: https://github.com/dream2023/docsify-plugin-run
• Owner: dream2023
• Created: 2019-12-08T15:31:56.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-01-27T01:08:34.000Z (about 5 years ago)
• Last Synced: 2024-12-26T08:16:50.405Z (about 1 month ago)
• Topics: docsify, docsify-demo, docsify-editor, docsify-plugin, docsify-sfc, docsify-vue, vue-run-sfc
• Language: HTML
• Homepage: https://dream2023.github.io/docsify-plugin-run/
• Size: 13.7 KB
• Stars: 11
• Watchers: 1
• Forks: 8
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# docsify-plugin-run | docsify 在线运行 Vue 单文件

## 🍏 介绍

`docsify-plugin-run` 通过对 [vue-run-sfc](https://github.com/dream2023/vue-run-sfc) 的封装, 实现了 docsify 在线运行和编辑 Vue 单文件的能力, 简直是写 DEMO 福音, 再也不用担心 `JSFiddle` 或 `Codepen` 无法访问了.

```html

``html run

  
{{name}} DEMO利器!


  export default {

    data () {

      return {

        name: 'docsify-plugin-run'

      }

    }

  }

  .title {

    color: #42b983;

  }

``  <== 这里和上面的 ` 有 3 个

```

## DEMO & DOC

[https://dream2023.github.io/docsify-plugin-run/](https://dream2023.github.io/docsify-plugin-run/)

## 🍎 使用

```html

  window.$docsify = {

    // 配置, 更多属性解释请往下面翻 ↓

    run: {

      themeColor: 'green',

      themeBorderColor: '#eee',

      reverse: true,

      // ...

    }

  }

```

## 🍊示例

### 全局配置: 运行 element-ui

```html

  window.$docsify = {

    run: {

      jsLabs: ['https://unpkg.com/element-ui/lib/index.js'],

      cssLabs: ['https://unpkg.com/element-ui/lib/theme-chalk/index.css'],

    }

  }

```

```html

``html run

  

    用户管理

    配置管理

    角色管理

    定时任务补偿

  

``  <== 这里和上面的 ` 有 3 个

```

### 局部配置: 自定义显示

```html

``html run {title: '局部配置', height: '200px', row: true}

  
通过局部配置实现高度自定义和左右布局



b {

  color: #42b983;

}

`` <== 这里和上面的 ` 有 3 个

```

## 🍇 配置属性列表

具体属性请参考: [vue-run-sfc](https://github.com/dream2023/vue-run-sfc#props-%E5%B1%9E%E6%80%A7%E8%AF%B4%E6%98%8E)

```js

{

  /**

   * js 库

   * @example: ['https://unpkg.com/element-ui/lib/index.js']

   */

  jsLabs: Array,

  /**

   * css 库

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

   */

  cssLabs: Array,

  /**

   * js 字符串

   * @example: 'alert(1)'

   */

  js: [Array, String],

  /**

   * css 字符串

   * @example: 'body { color: red }'

   */

  css: [Array, String],

  // 主题色

  // 默认值为: #42b983

  themeColor: {

    type: String,

    default: '#42b983'

  },

  // 主题色

  // 默认值为: #42b983

  themeBorderColor: {

    type: String,

    default: 'rgba(0,0,0,.07)'

  },

  /**

   * 代码编辑器和效果预览排列方式

   * 当为 false 时, 上下排列

   * 当为 true 时, 左右排列

   */

  row: {

    type: Boolean,

    default: undefined

  },

  /**

   * 当 `row` 为 true 时, 编辑区和展示区上下位置

   * 当为 false 时, 编辑器在下, 展示区在上

   * 当为 true 时, 编辑器在上, 展示区在下

   */

  reverse: Boolean,

  /**

   * 高度

   * @example: '400px'

   */

  height: String,

  /**

   * 初始加载是否打开编辑区

   * 当为 false 时, 默认是关闭编辑区

   * 当为 true 时, 默认是打开编辑区

   */

  open: Boolean,

  /**

   * 是否隐藏头部

   */

  isHideHeader: Boolean

}

```

## 相关链接

- [vue-run-sfc](https://github.com/dream2023/vue-run-sfc)

- [vuep.run](http://vuep.run/)