# MD文件视图解析器示例

## 基本用法
:::demo 
```html
<template>
    <div>
        <cv-md-render
            :content="testMd"
            :components="components"
            @on-line-run-demo="onLineRunDemo"
            :outline="false"
        ></cv-md-render>
    </div>
</template>

<script>
let testMd = `
## 组件插槽

| 名称 | 描述 |
| ---- | ---- |
| paneL | 左侧区域 |
| paneR | 右侧区域 |

## 组件事件
| 事件名称     | 回调参数 | 触发时机及顺序|触发方式|
|---------- |-------------- |---------- |---------- |
| resize(percent)   | percent：左侧/上侧区域百分比 | 拖动分隔条时 |  同步 | 
`;
export default {
    name: "index",
    components: {CvMdRender},
    data(){
        return{
            testMd,
            components:{
            }
        }
    },
    methods:{
        onLineRunDemo(config){
            let {renderConfig,executableScripts,vueVersion} = config;
            alert("打开对应的在线编辑页；");
        }
    }
}
</script>

<style scoped>

</style>

```
:::