elementplus学习组件篇-text组件

demo演示

text主要用在展示文本类，官方demo

源码

<template>
    <component :is="tag" :class="textKls" :style="{ '-webkit-line-clamp': lineClamp }">
        <slot />
    </component>
</template>

<script lang="ts" setup>
// prop的size > formItem的size > form的size > configProvider的size
const textSize = useFormSize(); 

// className的组合
const textKls = computed(() => [
    ns.b(), // el-text
    ns.m(props.type), // 类似el-text--primary
    ns.m(textSize.value), // 类似el-text-large
    ns.is('truncated', props.truncated), // is-truncated
    ns.is('line-clamp', !isUndefined(props.lineClamp)), // is-line-clamp
]);
</script>

1. 使用<component :is=xxx>实现props.tag自定义标签
2. 调用useFormSize()hooks函数，该函数实现的是size的取值规则，prop的size > formItem的size > form的size > configProvider的size，代码如下:

export const useFormSize = () => {
    const size = ignore.prop ? emptyRef : useProp<ComponentSize>('size');
    // ...
    return computed((): ComponentSize => size.value || unref(fallback) || formItem?.size || form?.size || globalConfig.value || '');
};

而useProps()这个hooks则是通过getCurrentInstance().propxy.$props获取组件的prop书属性

export const useProp = <T>(name: string): ComputedRef<T | undefined> => {
    const vm = getCurrentInstance();
    return computed(() => (vm?.proxy?.$props as any)?.[name]);
};