mirror of https://github.com/layui/layui
198 lines
3.1 KiB
Markdown
198 lines
3.1 KiB
Markdown
<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>name</td>
|
|
<td>
|
|
|
|
组件名称。如 `name:'tabs'`，那么在使用组件时，可通过 `layui.tabs` 获得该组件。注：*组件名必须唯一*。
|
|
|
|
</td>
|
|
<td>string</td>
|
|
<td>-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>config</td>
|
|
<td>
|
|
|
|
定义组件渲染时的默认配置项。
|
|
|
|
</td>
|
|
<td>object</td>
|
|
<td>-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>CONST</td>
|
|
<td>
|
|
|
|
通用常量集，一般存放固定字符，如类名等。如：
|
|
|
|
```
|
|
CONST: {
|
|
ELEM: 'layui-tabs',
|
|
}
|
|
```
|
|
|
|
上述常量可通过 `component.CONST.ELEM` 获得。
|
|
|
|
</td>
|
|
<td>object</td>
|
|
<td>-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>isRenderWithoutElem</td>
|
|
<td>
|
|
|
|
渲染是否无需指定目标元素。即无需设置 `elem` 选项，一般用于渲染即显示的组件类型。
|
|
|
|
</td>
|
|
<td>boolean</td>
|
|
<td>
|
|
|
|
`false`
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>isRenderOnEvent</td>
|
|
<td>
|
|
|
|
渲染是否仅由事件触发。如 `dropdown` 这类通过点击触发的组件，那么应该设置为 `true`；而诸如 `tabs` 这类初始即展示的组件，则应该设置为 `false`。*推荐根据组件类型始终显式设置对应值*。
|
|
|
|
</td>
|
|
<td>boolean</td>
|
|
<td>
|
|
|
|
`true`
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>isDeepReload</td>
|
|
<td>
|
|
|
|
组件重载时是否允许为深度重载，即每次重载时选项进行深度合并。
|
|
|
|
</td>
|
|
<td>boolean</td>
|
|
<td>
|
|
|
|
`false`
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4" style="text-align: center">
|
|
|
|
<div id="options.callback" lay-pid="options" class="ws-anchor">
|
|
|
|
[回调函数](#options.callback)
|
|
|
|
</div>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>render</td>
|
|
<td colspan="3">
|
|
|
|
组件渲染的逻辑。
|
|
|
|
```js
|
|
render: function() {
|
|
// 组件的容器构建、插入等
|
|
// …
|
|
}
|
|
```
|
|
|
|
也可以通过原型 `component.Class.prototype.render` 进行定义。
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>beforeInit</td>
|
|
<td colspan="3">
|
|
|
|
组件初始化之前的回调函数。
|
|
|
|
```js
|
|
beforeInit: function(options) {
|
|
console.log(options); // 获得组件初始化前的配置项
|
|
}
|
|
```
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>beforeRender</td>
|
|
<td colspan="3">
|
|
|
|
渲染之前的回调函数。
|
|
|
|
```js
|
|
beforeRender: function(options) {
|
|
console.log(options); // 获得组件渲染前的配置项
|
|
}
|
|
```
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>extendsInstance</td>
|
|
<td colspan="3">
|
|
|
|
扩展组件渲染的实例对象的回调函数。如：
|
|
|
|
```js
|
|
extendsInstance: function(that) {
|
|
return {
|
|
// 关闭组件
|
|
close: function() {
|
|
that.remove(); // 调用组件原型中的 remove 方法
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
那么，当组件渲染时，即可通过它返回的对象调用实例方法：
|
|
|
|
```js
|
|
var inst = xxx.render(); // 某组件渲染
|
|
inst.close(); // 关闭某组件
|
|
```
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>events</td>
|
|
<td colspan="3">
|
|
|
|
定义组件各类内部事件。
|
|
|
|
```js
|
|
events: function() {
|
|
// 亦可包含针对组件的 window, document 等全局事件
|
|
// …
|
|
}
|
|
```
|
|
|
|
也可以通过原型 `component.Class.prototype.events` 进行定义。
|
|
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|