# Layui Comp Exp

**Repository Path**: tibixinsi/layui-comp-exp

## Basic Information

- **Project Name**: Layui Comp Exp
- **Description**: 🎗️ 基 于 layui 的 Web components 拓 展 comp ，类 似 于 vue、svelte 的 组 件 。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2025-06-04
- **Last Updated**: 2025-06-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Layui Comp Exp

#### 介绍
🎗️ 基 于 layui 的 Web components 拓 展 comp ，类 似 于 vue、svelte 的 组 件 。

[官网](https://layui.dev/)

## 配置

```html
<script>
    layui.config({
        base: "/model/", // 加载模块路径 comp.js文件夹
    })
</script>
```

## 使用

```html
<!-- link标签属性common 会被comp拿到作为默认样式 -->
<link rel="stylesheet" common href="/layui/css/layui.css">

<!-- 组件 -->
<my-banner name="asd"></my-banner>
<!-- 组件 -->
<is-banner name="12"></is-banner>

<script>
    layui.use(["comp"], function () {
        let comp = layui.comp

        // 渲染组件
        comp.render({tag:"my-banner", href:"/component/banner.html"})

        comp.render({tag:"is-banner", href:"/component/banner.html"})
    })
</script>
```
> comp.render渲染是一对一标签绑定，重复无效

## 组件页面模板
```html
...

<!-- 只能有一个script标签，其他内容和style都可以写 -->
<script>

// 内置两个参数，target和doc

// target 获取当前标签对象
console.log("当前标签：", target)

// doc 获取当前影子dom对象
console.log("当前dom：", doc)

// 下面是生命周期钩子，可根据需要使用

// 组件挂载
doc.hooks.onReady = function () {
    console.log("组件初次挂载")
}

// 组件内容包括属性发生更新
doc.hooks.onChange = function (e) {
    console.log("组件更新", e)
}

</script>

<!-- 可以多个style标签 -->
<style>
    
</style>

...
```

### comp API

|  API   | 描述  |
|  ----  | ----  |
| let comp = layui.comp  | 获得 comp 模块。 |
| comp.render(options)  | 渲染模块 |


#### comp.render `options`属性

|  属性名   | 描述  | 类型  | 默认值  |
|  ----  | ----  | ----  | ----  |
|  tag  | 标签名，必须以小写字母开头，包含一个连字符  | string  | 必填  |
|  href | html内容文件链接  | string  | 必填  |
| doc | 影子dom对象，用于绑定元素，用于嵌套组件，默认`document`  | object  | document |
|  isStyle | 获取页面样式(会获取 link标签 标记属性 common 的内容，否则无默认样式)  | bool  | true  |

#### 模板默认参数

|  参数   | 描述  | 类型  |
|  ----  | ----  | ----  |
|  target  | 当前组件的标签对象  | object  |
|  doc  | 模板里面的document，用于绑定元素  | object  |


## 注意事项

- 组件标签必须以小写字母开头，包含一个连字符，如：`<my-banner></my-banner>`。
- 嵌套组件时，需要传入`doc`参数，如：`comp.render({ tag: "my-banner", href: "/component/banner.html" , doc })`。否则无法达到嵌套效果
- layui部分模块不可用
- 在组件内使用jq、js选择器时，需要使用`doc`参数，如：`$(".btn",doc)`或者`doc.querySelector(".layui-btn")`。否则无法获取到组件内的元素。