# Layui Comp Exp

**Repository Path**: xbmt/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**: 2024-09-05
- **Last Updated**: 2024-09-05

## 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("my-banner", "/component/banner.html")

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

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

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

// data 获取当前属性数据
console.log("获取传参数据：", data)

// tagName获取当前标签名
console.log("当前标签名：", tagName)

// document获取当前doc
console.log("当前dom：", doc)

</script>

<!-- 只能一个style标签,多个可能优先级不同 -->
<style>
    
</style>

...
```

comp API
|  API   | 描述  |
|  ----  | ----  |
| let comp = layui.comp  | 获得 comp 模块。 |
| comp.render(tag,href,isStyle)  | 渲染模块 |
| comp.data  | 已经渲染的comp数据 |

comp.render属性
|  属性名   | 描述  | 类型  | 默认值  |
|  ----  | ----  | ----  | ----  |
|  tag  | 标签名，必须以小写字母开头，包含一个连字符  | string  | 必填  |
|  href | html内容文件链接  | string  | 必填  |
|  isStyle | 获取页面样式(会获取 link标签 标记属性 common 的内容，否则无默认样式)  | bool  | true  |

模板默认参数
|  参数   | 描述  | 类型  |
|  ----  | ----  | ----  |
|  data  | 标签属性数据，标签属性传参  | object  |
|  tagName  | 当前的标签名  | string  |
|  doc  | 模板里面的document，用于绑定元素  | object  |