Ts10-利用自建组件库框架写组件02

布局组件

Ts 继续上一节的介绍样式的写法，lerna的版本控制等等

// row col 两个 lerna create row col
// 两个空项目但是文件都放在一个里面去，其中的一个index.ts去另一个读取。套路和button button-group一个套路
// src/创建 row.ts col.ts 注意昂这里不是.vue好处再说
// 没有模板可以直接用
import {defineComponent,h,computed} from "vue"
// 这么玩有啥好处？
export default defineComponent({
    name: "ZCol",
    props:{
        tag: { // h 创建的动态标签
            type:String,
            default: 'div'
        },
        span: { // css flex的占比
            type:Number,
            default:24,
        },
        offset: {
            type:Number, // 列和列之间的间距
            defualt:0,
        }
    },
    setup(props, ctx){
        // 计算样式
        const classes = computed(()=>{ // 这玩意是个ref类型需要.value 这东西是computedRef类型
            const ret = [];
            const pos = ['span','offset'] as const // 常亮都as const // foreach的时候会有代码提示
            pos.forEach(item => {
                const n = props[item] // 这样就有提示了否则都是string
                if(!isNaN(n) && n > 0){
                    ret.push(`z-cols-${item}-${n}`)
                }
            });
            
            return [
                'z-col',
                ...ret
            ];
        });
        
        // 根据父组件的gutterj计算间距
        const gutter = inject('gutter',0);
        const styles = computed(() => {
            if(gutter) {
                reteurn {
                    paddingLeft: (gutter / 2) + 'px',
                    paddingRight: (gutter / 2) + 'px'
                }
            }
            return {};
        });
        
        return () => {
            return h(props.tag, {
                class: classes.value // 这里不是模版所以要带着value
                style:styles.value ,
            }, slots.default?.()) // 动态创建标签 如果默认有插槽就调用。
        }
    }
});


// 这里有个好处index.ts引用的时候不需要在.install声明在导出了因为他就是个组件
import Col from "./col";
Col.install = (app:App):void => {
    app.Component(Col.name, Col)
}

export default Col;

// 如果想要发布包
// lerna pushlish 会让你选择包的版本。
// 用户随意传标签的用这种方案快。
// col span 24中写法
// 样式怎么控制？
@include b(col) {
    @for $i from 1 througth 24{
        .z-col-span-#{$i}{
            max-weight:(1/24*$i*100) * 1%;
            flex:(1/24*$i*100) * 1%
        }

        .z-col-offset-#{$i}{
            
            margin-lef:(1/24*$i*100) * 1%
        }
    }
}
父
    setup(props, ctx){
        provide
        provide('aaa', 1)
    }
子
    inject
    setup(props, ctx){
        const i = inject('aaa',0);// 如果父没有这里用默认0
    }