vue3+ts封装组件经验

1、组件效果：

2、 组件入参，props,

props:{
    labelList:{ // 存放卡片中要展示的label和prop，CONFIG_ITEM指定哪些字段是必传
        type:Array<CONFIG_ITEM>,
        default: () => []
    },
    dataList:{ // prop:value
        type:Object,
        default: () => {}
    }
}

3、考虑卡片有无标题的情况和文本对齐方式，使用透传属性

const attrs = useAttrs();
// 文本对齐方式，默认左对齐
const alignItem = attrs['input-align'] || 'left';
// 是否有标题,默认有标题
const isNoTitle = attrs.hasOwnProperty('is-title') || false;

4、对应的HTML

<div :class = "[itemAlign,isNotitle ? 'no-title' : '']" class="row" v-for="(item,index) in lableList" :key = "index">
    // 没有标题
    <div v-if="isNotitle">
        <p class = "subTitle">
            <span>{{ item?.label }}</span>
            <span :style ="item.style ? dataList[item.style] : ''">{{dataList[item.prop]}}             </span>
        </p>
    </div>
    <div v-else>
        <p class="title" v-if="index == 0">
            <!-- .... 省略  -->
        </p>
        <p class = "subTitle" v-else>
           <!-- .... 同上  -->
        </p>
    </div>
</div>

5、部分css

.row.right {
    .subtitle{
        display:flex,
        justify-content:space-between;
        align-items:center
    }
}
.row {
    .title {
        font-weight:500
    }
}

6、组件使用

<my-cell :label-list = "labelList" :data-list = "dataList" input-align = "right" is-no-title></my-cell>