init
This commit is contained in:
383
public/frontend/layui-main/docs/code/detail/options.md
Executable file
383
public/frontend/layui-main/docs/code/detail/options.md
Executable file
@@ -0,0 +1,383 @@
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col>
|
||||
<col width="100">
|
||||
<col width="100">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>属性名</th>
|
||||
<th>描述</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>elem</td>
|
||||
<td>
|
||||
|
||||
绑定元素选择器或 DOM 对象
|
||||
|
||||
</td>
|
||||
<td>string/DOM</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>preview <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
是否开启 Code 预览功能，可选值有：
|
||||
|
||||
- `true` 开启 Code 的普通预览
|
||||
- `false` 关闭 Code 预览（默认）
|
||||
- `"iframe"` 开启 Code 在 iframe 模式中预览
|
||||
|
||||
当开启该属性时，`elem` 指定的元素需要设置成以下结构：
|
||||
|
||||
```
|
||||
<pre class="layui-code" lay-options="{}">
|
||||
<textarea>
|
||||
code content
|
||||
</textarea>
|
||||
</pre>
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>boolean<br>string</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>layout <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
开启预览后的面板布局方式，值为一个数组，数组的可选成员有：
|
||||
|
||||
- `code` 代码区域
|
||||
- `preview` 预览区域
|
||||
|
||||
面板将根据数组的排列顺序来显示，如：
|
||||
|
||||
```
|
||||
layout: ['code', 'preview']
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>style <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
设置 Code 和预览区域的公共样式
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>codeStyle <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
设置 Code 区域的局部样式，优先级高于 `style` 属性
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>previewStyle <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
设置预览区域的局部样式，优先级高于 `style` 属性
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>id <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
设置实例的唯一索引，以便用于其他操作
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>className <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
追加实例面板的 `className`，以便对其自定义样式
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>tools <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
用于开启 `preview` 属性后的面板头部右侧区域工具栏图标，值为一个数组，内置成员：
|
||||
|
||||
- `copy` <sup>2.8.2+</sup> : 代码复制
|
||||
- `full` : 最大化显示
|
||||
- `window` : 在新窗口预览。一般当 `layout: 'iframe'` 时开启，且 code 中须包含完整的 HTML 方可在新窗口正常预览。
|
||||
|
||||
工具图标将根据数组的排列顺序来显示，如：
|
||||
|
||||
```
|
||||
tools: [
|
||||
'full',
|
||||
'window',
|
||||
// 自定义扩展工具 --- 2.8.17+
|
||||
{
|
||||
title: ['切换高亮主题'],
|
||||
type: 'theme',
|
||||
event: function(obj) {
|
||||
console.log(obj); // 当前实例相关信息
|
||||
// do something
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
`type` 值对应[图标](../icon/) `className` 的 `layui-icon-` 后的名称。如图标：`layui-icon-theme`，那么 `type` 设置 `theme` 即可。
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toolsEvent <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
点击工具栏的回调函数，功能同 `tools` 中的 `event`，只是需通过 `type` 属性来区分是哪个工具菜单。
|
||||
|
||||
```
|
||||
toolsEvent: function(obj){
|
||||
console.log(obj); // 当前实例相关信息
|
||||
console.log(obj.type); // 当前实例相关信息
|
||||
}
|
||||
```
|
||||
|
||||
通过该函数与 `tools` 属性的搭配，可实现对工具栏的扩展。
|
||||
|
||||
</td>
|
||||
<td>function</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>copy <sup>2.8.2+</sup></td>
|
||||
<td>
|
||||
|
||||
用于开启代码复制功能图标。若开启 `priview`，则自动放置在 `tools` 属性中，复制图标将显示在容器右上角工具栏；若未开启 `priview`，则显示在 code 区域右上角。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>text <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
自定义默认文本，值为一个对象，可选成员有:
|
||||
|
||||
```
|
||||
text: {
|
||||
code: '代码栏标题', // 默认: </>
|
||||
preview: '预览栏标题' // 默认: Preview
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>object</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>header <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
是否开启 Code 栏头部区域。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ln</td>
|
||||
<td>
|
||||
|
||||
是否显示 Code 区域的行号
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>theme <sup>2.8.17+</sup></td>
|
||||
<td>
|
||||
|
||||
Code 容器的主题风格，可选值有：
|
||||
|
||||
- `light` 浅色模式（默认）
|
||||
- `dark` 深色模式
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>encode</td>
|
||||
<td>
|
||||
|
||||
是否对 code 中的 html 进行编码（转义）。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lang <sup>2.8.17+</sup></td>
|
||||
<td>
|
||||
|
||||
指定语言类型。如：`lang: 'html'`
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>langMarker <sup>2.8.17+</sup></td>
|
||||
<td>
|
||||
|
||||
是否在代码区域右上角显示语言类型
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>wordWrap <sup>2.8.17+</sup></td>
|
||||
<td>
|
||||
|
||||
Code 文字是否自动换行
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>highlighter <sup>2.8.17+</sup></td>
|
||||
<td>
|
||||
|
||||
指定语法高亮器，可选值：
|
||||
|
||||
- `hljs` : 指定 `highlight.js` 库
|
||||
- `prism` : 指定 `prism.js` 库
|
||||
- `shiki` : 指定 `shiki.js` 库
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[codeRender](#options.codeRender) <sup>2.8+</sup>
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.codeRender" lay-pid="options" class="ws-anchor">
|
||||
用于重新渲染 code，譬如代码高亮处理。
|
||||
</div>
|
||||
|
||||
```
|
||||
codeRender: function(code, opts){
|
||||
// 此处以 highlight.js 为例
|
||||
return hljs.highlight(code, {language: opts.lang}).value;
|
||||
}
|
||||
```
|
||||
|
||||
code 组件语法高亮相关示例：
|
||||
|
||||
- <a href="https://stackblitz.com/edit/web-platform-hhftb4?file=index.html" rel="nofollow" target="_blank">highlight 和 prism 语法高亮示例</a>
|
||||
- <a href="https://codepen.io/Sight-wcg/pen/GRPjQyG" rel="nofollow" target="_blank">shiki 语法高亮示例</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[done](#options.done) <sup>2.8+</sup>
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.done" lay-pid="options" class="ws-anchor">
|
||||
组件渲染完毕的回调函数，函数返回一个 object 类型参数
|
||||
</div>
|
||||
|
||||
```
|
||||
done: function(obj){
|
||||
var container = obj.container; // 当前面板的容器对象
|
||||
obj.render(); // 对预览中的 `element,form` 等组件进行渲染
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[onCopy](#options.onCopy) <sup>2.8.2+</sup>
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.onCopy" lay-pid="options" class="ws-anchor">
|
||||
点击复制图标时的回调函数。
|
||||
</div>
|
||||
|
||||
```
|
||||
onCopy: function(code){
|
||||
console.log(code); // 得到当前 code 内容
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
66
public/frontend/layui-main/docs/code/index.md
Executable file
66
public/frontend/layui-main/docs/code/index.md
Executable file
@@ -0,0 +1,66 @@
|
||||
---
|
||||
title: Code 预览组件 code
|
||||
toc: true
|
||||
---
|
||||
|
||||
# Code 预览组件
|
||||
|
||||
> 代码预览组件 `code` 主要用于对代码区块的修饰和对应的效果预览，如 Layui 各组件文档中的示例演示。
|
||||
|
||||
|
||||
<h2 id="api" lay-toc="{}">方法</h2>
|
||||
|
||||
`var codeInst = layui.code(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)。
|
||||
|
||||
其中 `codeInst` <sup>2.8.17+</sup> 即实例返回的对象，包含对当前实例进行重载等方法成员，如：
|
||||
|
||||
```
|
||||
var codeInst = layui.code(options);
|
||||
console.log(codeInst); // 查看所有成员
|
||||
codeInst.config; // 当前实例配置项
|
||||
codeInst.reload(options); // 重载
|
||||
codeInst.reloadCode(options); // 仅重载 code
|
||||
```
|
||||
|
||||
|
||||
另外，属性除了在该方法中传递，也可以直接写在元素的 `lay-options` 属性上，如：
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 315px;', layout: ['code', 'preview']}">
|
||||
<textarea>
|
||||
<pre class="layui-code code-demo" lay-options="{}">
|
||||
light theme
|
||||
light theme
|
||||
light theme
|
||||
</pre>
|
||||
|
||||
<hr>
|
||||
|
||||
<pre class="layui-code code-demo" lay-options="{theme: 'dark'}">
|
||||
dark theme
|
||||
dark theme
|
||||
dark theme
|
||||
</pre>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
// code
|
||||
layui.code({
|
||||
elem: '.code-demo'
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="options" lay-toc="{hot: true}">属性</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("/code/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
<h2>小贴士</h2>
|
||||
|
||||
> code 组件可广泛应用于技术类文档、博客等页面，可轻松适配第三方主流语法高亮器。
|
||||
Reference in New Issue
Block a user