作者:李明骏 历史版本:1 最后编辑:李明骏 更新时间:2024-07-19 16:43
编写版本:v1.2.1
适用版本:v1.2.0+
前置条件:使用的工程需在 Webpack5 版本以上,并使用模块联邦(ModuleFederationPlugin)接入 ui-base-core 项目提供的共享组件
共享组件-动态标签
一、 效果图
二、 组件路径
baseCore/core-abbreviation-title.vue
源码:ui-base-core/src/components/core-title/abbreviationTitle.vue
三、 使用举例
template
<template>
...
<AbbreviationTitle :label="item.name" :abbreviation-length="18" />
...
</template>
script
<script setup>
import AbbreviationTitle from 'baseCore/core-abbreviation-title.vue'
...
</script>
四、 组件API
属性
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
label | String | - | 显示的完整标题文本 |
abbreviationLength | Number | 16 | 标题显示的最大字符数 |
abbreviationPlacement | String | top | 省略内容提示框的位置,可以是:top top-start top-end bottom bottom-start bottom-end left left-start left-end right right-start right-end |