1.1.2 • Published 7 months ago
@wenonly/html-viewer v1.1.2
html-viewer
向网页中插入 html
+ javascript
+ css
的代码查看器,可实时预览效果。
效果
效果文章示例地址 https://www.cnblogs.com/wenonly/p/17045178.html
使用方式
- 先引入打包好的 js 库
<script
src="https://npm.elemecdn.com/@wenonly/html-viewer/lib/html-viewer.umd.js"
defer
></script>
- 准备好需要显示的对应
html
+javascript
+css
代码的zip
文件,结构如下:
zipFolder
|- index.html
|- index.css
|- index.js
- 在页面中使用
html-viewer
标签创建查看器,通过src
配置zip
地址下载远程代码
<html-viewer src="https://.../code.zip" iframe-width="800px"></html-viewer>
html-viewer 参数
参数 | 类型 | 描述 |
---|---|---|
src | string | 需显示的代码 zip 文件地址 |
iframe-width | string | 内部 iframe 容器宽度 |
iframe-height | string | 内部 iframe 容器高度 |
wrapper-style | string | div 容器 style |