# webcom

**Repository Path**: lbc19920615/webcom

## Basic Information

- **Project Name**: webcom
- **Description**: webcom是使用 Web Components 实现的前端组件库。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-22
- **Last Updated**: 2025-06-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一个纯webcomponents UI 库

默认使用dayjs

![ui1.png](doc/ui1.png)

### 适用webcomponents的简单框架

- z-text 绑定基础类型
- z-each 循环数组数据
- z-cond 提供条件判断

```html
<script type="module">
    import {initGlobal, buildSimpleApp} from "./webcom.js";

    initGlobal()
    window.htmlApp = buildSimpleApp({
        data(){
            return {
                str: "str",
                items: []
            }
        },
        methods: {
        }
    });
</script>

<div id="app1">
    <z-config>
        <z-text :value="str"></z-text>
        <z-each cond="items as item">
            <template>
                <div>
                    <z-text :value="item"></z-text>
                </div>
            </template>
        </z-each>
        <z-cond>
            <template cond="str">
                cond1 is true
            </template>
        </z-cond>
    </z-config>
</div>

<script type="module">
    window.htmlApp.mount(document.querySelector('#app1'))
</script>
```

可以继承ztext类 来定制自己的文字输出
```html
<script type="module">
    class MPriceText extends customElements.get('z-text') {
        constructor() {
            super();
        }
        handleValue(v) {
            let newvalue = super.handleValue(v);
            return  parseFloat(newvalue).toFixed(2);
        }
    }
    MPriceText.defsel('m-price-text', {
        attrs: {
            value: ''
        }
    })
</script>

<m-price-text :value="str"></m-price-text>
```