帮助

# 代码调试组件

# HTML 代码调试

内嵌到文档中

- 示例代码
<html-code-view height="600px" file-path="./demo.html"></html-code-view>
1
2

注意

filePath 和 code 二选一,如果使用 filePath 就不能使用code属性加载源代码

# Attributes

参数 参数说明 类型 可选值 默认值
height 组件高度 string - 100%
width 组件宽度 string - 100%
filePath 源码路径,从指定路径加载源代码 string - ''
code 源码字符串 string - ''
  • 示例代码

单独页面显示

注意

html-code-view 组件的高度和宽度默认为 100%

---
title: html代码示例
autoIgnore: true #是否不显示在目录中
prev: false #不显示上一章节按钮
next: false #不显示下一章节按钮
sidebar: false #不显示目录
navbar: false #不显示顶部菜单
pageClass: full-screen #给page指定class
---
<html-code-view file-path="./demo.html"></html-code-view>
1
2
3
4
5
6
7
8
9
10

HTML单独页面示例

# Vue 代码调试

<vue-code-view file-path="../dev-support/map-sdk/mapbox/wmtsLayer.vue"
:staticResourceList="['http://atlas.geoway.com.cn/atlas-map-base/static/mapbox-sdk/mapbox-gl.css','http://atlas.geoway.com.cn/atlas-map-base/static/mapbox-sdk/mapbox-gl-dev.js']"
@afterLoadStatic="$event.mapboxgl.isMercator = false,$event.mapboxgl.accessToken = 'pk.eyJ1IjoibW9zZXMyNCIsImEiOiJja3QxZDFpNDAwZHl5MnBvamxiczA3dnB6In0.6gMp4y-7KVr5BAPkYZd16g'"
/>
1
2
3
4

注意

filePath 和 code 二选一,如果使用 filePath 就不能使用code属性加载源代码 如果是单页面预览从url参数中传递filePath,url参数中的filePath优先级大于md文档中组件传参

# Attributes

参数 参数说明 类型 可选值 默认值
height 组件高度 string - 100%
width 组件宽度 string - 100%
filePath 源码路径,从指定路径加载源代码 string - ''
code 源码字符串 string - ''
staticResourceList 需要提前加载的静态资源列表,类型为字符串数组,资源加载顺序为数组索引顺序 Array - ''

# Events

事件 说明 回调类型 可选值 默认值
afterLoadStatic 在静态资源加载完成后执行,回调类型为Function,此回调只能处理简单的Js语句, $event 为回调函数的参数 window 全局变量 Function - 100%
---
title: html代码示例
autoIgnore: true #是否不显示在目录中
prev: false #不显示上一章节按钮
next: false #不显示下一章节按钮
sidebar: false #不显示目录
navbar: false #不显示顶部菜单
pageClass: full-screen #给page指定class
---
<vue-code-view file-path="./demo.vue"></vue-code-view>
1
2
3
4
5
6
7
8
9
10

Vue单独页面示例

# 示例代码跳转卡片

<gw-card-group>
<gw-card-item img="./img/示例中心.png" title="标准地形" link="" />
<gw-card-item img="./img/示例中心.png" title="ion地形" link="" />
<gw-card-item img="./img/示例中心.png" title="arcgis地形" link="" />
</gw-card-group>
1
2
3
4
5

标准地形
ion地形
arcgis地形

# Attributes

| 参数 | 参数说明 | 类型 | 可选值 | 默认值 | |----------|------|--------|-----|--|A | title | 卡片标题 | string | - | 100% | | img | 卡片图片地址(建议使用相对路径) | string | - | '' | | link | 链接路径,跳转至指定链接 | string | - | '' |

← 部署 →