Demo Block

简介

Demo Block 用于帮助你在编写文档时增加 vue ,react, 原生js 示例。在编写组件文档时，通常需要在文档上增加一些相关的示例，这些示例通常可以使用 JSFiddle 或 Codepen 的 Iframe 实现，但是维护成本会相对比较高，使用 Demo Block 可以快速的增加示例，并且可以很方便的修改。

提示

为了展示如何编写示例, 用于标记代码部分结束的三点增加了空格分隔，使用时需要将空格去除。

安装

安装 vuepress

参考官方文档 Vuepress

安装插件

npm i @d0whc3r/vuepress-plugin-demo-block

配置 vuepress config

config.js

module.exports = {
  head: [
    ['script', { src: 'https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js' }],
    ['script', { src: 'https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js' }],
    ['script', { src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js' }],
    ['script', { src: 'https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js' }],
  ],
  plugins: [
    'demo-block'
  ]
}

开始使用

在 Markdown 文件中编写以下代码：

Vue示例

::: demo
```html
<template>
  <div class="box-vue">Vue {{ message }}</div>
</template>
<script>
export default {
  data: () => ({ message: 'Hello World' })
}
</script>
<style>
.box-vue { color: red; }
</style>
` ` `  <= 删除这里的空格
:::

React示例

::: demo react
```js
export default class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = { message: 'Hello World' }
  }
  render () {
    return (
      <div className="box-react">
        React {this.state.message}
      </div>
    )
  }
}
App.__style__ = `
  .box-react { color: red; }   
`
` ` ` <= 删除这里的空格
:::

原生JS示例

::: demo [vanilla]
```html
<html>
  <div id="vanilla-box"></div>
</html>
<script>
  var box = document.getElementById('vanilla-box')
  box.innerHTML = 'Hello World!'
</script>
<style>
#vanilla-box {
  color: red;
}
</style>
` ` `
:::

横向展示示例

::: demo [react]
```js
export default class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = { message: 'Hello World' }
  }
  render () {
    return (
      <div className="box-react">
        React {this.state.message}
      </div>
    )
  }
}
App.__style__ = `
  .box-react { color: red; }   
`
` ` `  <= delete spaces here
` ` `json
{
  "horizontal": true
}
` ` `
:::

Vue示例 →