floraachy/layui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
173da167ad
layui/docs/code/detail/options.md
贤心 43f6e4e7aa 完善 code 文档中属性说明
2023-09-28 11:42:00 +08:00

6.6 KiB
Raw Blame History

属性名 描述 类型 默认值
elem

绑定元素选择器或 DOM 对象

 string/DOM -
code 2.8.18+

设置原始 code 值，默认取目标元素中的内容

 string -
preview 2.8+

是否开启 Code 预览功能，可选值有：

  • true 开启 Code 的普通预览
  • false 关闭 Code 预览（默认）
  • "iframe" 开启 Code 在 iframe 模式中预览

当开启该属性时，elem 指定的元素需要设置成以下结构：

<pre class="layui-code" lay-options="{}">
  <textarea>
code content
  </textarea>
</pre>
boolean
string

false
layout 2.8+

开启预览后的面板布局方式，值为一个数组，数组的可选成员有：

  • code 代码区域
  • preview 预览区域

面板将根据数组的排列顺序来显示，如：

layout: ['code', 'preview']
array -
style 2.8+

设置 Code 和预览区域的公共样式

 string -
codeStyle 2.8+

设置 Code 区域的局部样式，优先级高于 style 属性

 string -
previewStyle 2.8+

设置预览区域的局部样式，优先级高于 style 属性

 string -
id 2.8+

设置实例的唯一索引，以便用于其他操作

 string -
className 2.8+

追加实例面板的 className，以便对其自定义样式

 string -
tools 2.8+

用于开启 preview 属性后的面板头部右侧区域工具栏图标，值为一个数组，内置成员：

  • copy 2.8.2+ : 代码复制
  • full : 最大化显示
  • window : 在新窗口预览。一般当 layout: 'iframe' 时开启，且 code 中须包含完整的 HTML 方可在新窗口正常预览。

工具图标将根据数组的排列顺序来显示，如：

tools: [
  'full',
  'window',
  // 自定义扩展工具 --- 2.8.17+
  {
    title: ['切换高亮主题'],
    type: 'theme',
    event: function(obj) {
      console.log(obj); // 当前实例相关信息
      // do something
    }
  }
]

type 值对应图标 className 的 layui-icon- 后的名称。如图标：layui-icon-theme，那么 type 设置 theme 即可。

 array -
toolsEvent 2.8+

点击工具栏的回调函数，功能同 tools 中的 event，只是需通过 type 属性来区分是哪个工具菜单。

toolsEvent: function(obj){
  console.log(obj); // 当前实例相关信息
  console.log(obj.type); // 当前实例相关信息
}

通过该函数与 tools 属性的搭配，可实现对工具栏的扩展。

 function -
copy 2.8.2+

用于开启代码复制功能图标。若开启 priview，则自动放置在 tools 属性中，复制图标将显示在容器右上角工具栏；若未开启 priview，则显示在 code 区域右上角。

 boolean

true
text 2.8+

自定义默认文本，值为一个对象，可选成员有:

text: {
  code: '代码栏标题', // 默认:  </>
  preview: '预览栏标题' // 默认: Preview
}
object -
header 2.8+

是否开启 Code 栏头部区域。

 boolean

false
ln

是否显示 Code 区域的行号

 boolean

true
theme 2.8.17+

Code 容器的主题风格，可选值有：

  • light 浅色模式（默认）
  • dark 深色模式
 string -
encode

是否对 code 中的 html 进行编码（转义）。

 boolean

true
lang 2.8.17+

指定语言类型。如：lang: 'html'

 string -
langMarker 2.8.17+

是否在代码区域右上角显示语言类型

 boolean

false
wordWrap 2.8.17+

Code 文字是否自动换行

 boolean

true
highlighter 2.8.17+

设置语法高亮器，可选值：

  • hljs : 指定 highlight.js 库
  • prism : 指定 prism.js 库
  • shiki : 指定 shiki.js 库

注：对应的语法高亮器 JS 库和相关主题 CSS 需自主引入，该属性仅用于内部适配。

 string -

codeRender 2.8+
用于重新渲染 code，譬如代码高亮处理。 
codeRender: function(code, opts){
  // 此处以 highlight.js 为例
  return hljs.highlight(code, {language: opts.lang}).value;
}

code 组件语法高亮相关示例：

done 2.8+
组件渲染完毕的回调函数，函数返回一个 object 类型参数 
done: function(obj){
  var container = obj.container; // 当前面板的容器对象
  obj.render(); // 对预览中的 `element,form` 等组件进行渲染
}

onCopy 2.8.2+
点击复制图标时的回调函数。 
onCopy: function(code){
  console.log(code); // 得到当前 code 内容
}